:root {
  /* Light */
  --bg-page: #F2F2F7;
  --bg-card: #FFFFFF;
  --bg-elev: #E5E5EA;        /* "élevé" : un cran plus marqué que page, pour faire ressortir les cards */
  --bg-pressed: #E5E5EA;
  --bg-icon: #F2F2F7;
  --label: #000000;
  --label-2: rgba(60, 60, 67, 0.6);
  --label-3: rgba(60, 60, 67, 0.3);
  --separator: rgba(60, 60, 67, 0.18);
  --border: rgba(60, 60, 67, 0.15);     /* alias pour les borders explicites */
  --text-primary: #000000;              /* alias label */
  --text-secondary: rgba(60, 60, 67, 0.6);  /* alias label-2 */
  --tab-inactive: rgba(60, 60, 67, 0.7);    /* tabs inactifs en light : plus contrasté que --gray */
  --tint: #FF3B30;
  --tint-soft: rgba(255, 59, 48, 0.12);
  --tint-soft-2: rgba(255, 59, 48, 0.18);
  --green: #34C759;
  --green-soft: rgba(52, 199, 89, 0.12);
  --green-soft-2: rgba(52, 199, 89, 0.2);
  --orange: #FF9500;
  --orange-glow: rgba(255, 149, 0, 0.15);
  --gray: #8E8E93;
  --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  --badge-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  --tab-bg: rgba(249, 249, 251, 0.85);
}

[data-theme="dark"] {
  --bg-page: #000000;
  --bg-card: #1C1C1E;
  --bg-elev: #2C2C2E;
  --bg-pressed: #3A3A3C;
  --bg-icon: #2C2C2E;
  --label: #FFFFFF;
  --label-2: rgba(235, 235, 245, 0.6);
  --label-3: rgba(235, 235, 245, 0.3);
  --separator: rgba(84, 84, 88, 0.5);
  --border: rgba(84, 84, 88, 0.4);
  --text-primary: #FFFFFF;
  --text-secondary: rgba(235, 235, 245, 0.6);
  --tab-inactive: #8E8E93;
  --tint: #FF453A;
  --tint-soft: rgba(255, 69, 58, 0.18);
  --tint-soft-2: rgba(255, 69, 58, 0.28);
  --green: #30D158;
  --green-soft: rgba(48, 209, 88, 0.18);
  --green-soft-2: rgba(48, 209, 88, 0.28);
  --orange: #FF9F0A;
  --orange-glow: rgba(255, 159, 10, 0.2);
  --gray: #8E8E93;
  --card-shadow: none;
  --badge-shadow: none;
  --tab-bg: rgba(28, 28, 30, 0.8);
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

html, body {
  overflow-x: hidden;
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  background: var(--bg-page);
  color: var(--label);
  font-size: 17px;
  line-height: 1.35;
  min-height: 100dvh;
  transition: background-color 0.25s ease, color 0.2s ease;
}

button { font-family: inherit; cursor: pointer; border: none; background: transparent; color: inherit; }
::selection { background: var(--tint-soft); }

/* Transitions globales pour le switch de thème */
.card, .quiz-card, .daily-card, .verb-card, .conv-line, .stats, .cat-chip,
.audio-btn, .theme-toggle, .tab-bar, .opt, .action, .stat-row {
  transition: background-color 0.25s ease, color 0.2s ease, border-color 0.2s ease;
}

/* ============ SHELL ============ */
.shell {
  max-width: 540px;
  margin: 0 auto;
  min-height: 100dvh;
  padding-bottom: calc(76px + env(safe-area-inset-bottom));
  background: var(--bg-page);
  position: relative;
  transition: background-color 0.25s ease;
}

/* ============ HEADER ============ */
.nav-bar {
  position: sticky;
  top: 0;
  z-index: 50;
  /* Padding top : safe-area iOS, sinon 12px min (Android natif) */
  /* En PWA Android standalone, env(safe-area-inset-top) est généralement 0
     car la statusbar est gérée par le système, donc 12px suffit */
  padding: max(env(safe-area-inset-top), 12px) 20px 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  background: var(--tab-bg);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  transition: background-color 0.25s ease;
  /* Empêche le header de wrap si overflow (force scroll horizontal interne) */
  flex-wrap: nowrap;
  overflow: hidden;
}
.large-title {
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.4px;
  color: var(--label);
  line-height: 1.05;
}
.large-title-sub {
  font-size: 13px;
  font-weight: 400;
  color: var(--label-2);
  margin-top: 2px;
  letter-spacing: -0.08px;
}
.brand-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
  flex-shrink: 1;
}
.brand-logo { display: block; height: 28px; width: auto; max-width: 100%; }
.brand-logo-dark { display: none; }
[data-theme="dark"] .brand-logo-light { display: none; }
[data-theme="dark"] .brand-logo-dark { display: block; }
.nav-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}

.streak-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  background: var(--bg-card);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  color: var(--tint);
  box-shadow: var(--badge-shadow);
  font-variant-numeric: tabular-nums;
}

.theme-toggle {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--bg-card);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--label);
  box-shadow: var(--badge-shadow);
  flex-shrink: 0;
}
.theme-toggle:active { transform: scale(0.92); background: var(--bg-pressed); }
.theme-toggle svg { width: 18px; height: 18px; }
.icon-moon { display: none; }
[data-theme="dark"] .icon-sun { display: none; }
[data-theme="dark"] .icon-moon { display: block; }

/* ====================================================================
   HEADER RESPONSIVE MOBILE
   Sur écrans étroits (< 400px Samsung, iPhone SE, etc.) le header
   peut déborder. On réduit progressivement.
   ==================================================================== */

/* Petits écrans (< 400px) : on réduit légèrement tout */
@media (max-width: 399px) {
  .nav-bar {
    padding-left: 14px;
    padding-right: 14px;
    gap: 6px;
  }
  .nav-actions { gap: 5px; }
  .theme-toggle {
    width: 32px;
    height: 32px;
  }
  .theme-toggle svg { width: 16px; height: 16px; }
  .header-premium-btn { width: 32px; height: 32px; }
  .header-premium-icon { font-size: 16px; }
  .brand-logo { height: 24px; }
}

/* Très petits écrans (< 360px iPhone SE, vieux Android) :
   on cache le bouton leaderboard, le badge XP reste */
@media (max-width: 359px) {
  .nav-bar {
    padding-left: 12px;
    padding-right: 12px;
    gap: 4px;
  }
  .nav-actions { gap: 4px; }
  /* Cache le bouton classement (accessible via XP modal) */
  #headerLeaderboardBtn { display: none; }
  .brand-logo { height: 22px; }
}

/* ============ CONTENT ============ */
.content { padding: 16px 16px 0; }

/* Transition entre vues : slide horizontale iOS-native
   Direction par défaut : depuis la droite (animation forward).
   Pour une vraie navigation directionnelle, on triggered .view-slide-back
   programmatiquement sur l'élément qui apparaît. */
.view {
  animation: viewSlideIn 0.28s cubic-bezier(0.32, 0.72, 0.32, 1) both;
}
.view.view-slide-back {
  animation-name: viewSlideInBack;
}
@keyframes viewSlideIn {
  from { opacity: 0; transform: translateX(18px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes viewSlideInBack {
  from { opacity: 0; transform: translateX(-18px); }
  to   { opacity: 1; transform: translateX(0); }
}
/* Respect prefers-reduced-motion : pas d'animation */
@media (prefers-reduced-motion: reduce) {
  .view { animation: none; }
}

/* ============ CATEGORY SCROLLER ============ */
.cat-scroller {
  position: sticky;
  top: var(--nav-h, 78px);
  z-index: 49;
  display: flex;
  gap: 4px;
  overflow-x: auto;
  padding: 10px 14px;
  margin: 0 0 12px;
  background: var(--bg-card);
  border-radius: 14px;
  box-shadow: var(--card-shadow);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  /* Indique visuellement qu'on peut scroller à droite via un mask gradient.
     L'effet est subtil mais ça suffit pour que l'œil capte le débordement. */
  mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 24px), transparent 100%);
  -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 24px), transparent 100%);
}
.cat-scroller::-webkit-scrollbar { display: none; }
.cat-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  background: transparent;
  border: 0;
  border-radius: 99px;
  padding: 6px 12px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.15s ease;
}
.cat-chip:hover {
  background: var(--bg-elev);
  color: var(--text-primary);
}
.cat-chip.active {
  background: color-mix(in srgb, var(--tint) 14%, transparent);
  color: var(--tint);
}
.cat-chip-emoji { font-size: 14px; line-height: 1; }

/* ============ INFO BANNER (tip par page) ============ */
.info-banner {
  position: relative;
  background: var(--bg-card);
  border-radius: 14px;
  padding: 14px 44px 14px 16px;
  margin-bottom: 16px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  box-shadow: var(--card-shadow);
  transition: background-color 0.25s ease;
}
.info-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--tint);
  margin-top: 1px;
}
.info-text {
  font-size: 14px;
  color: var(--label-2);
  line-height: 1.42;
  letter-spacing: -0.08px;
}
.info-text strong {
  color: var(--label);
  font-weight: 600;
}
.info-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--label-3);
}
.info-close:active { transform: scale(0.88); background: var(--bg-pressed); }
.info-close svg { width: 14px; height: 14px; }

/* ============ FLASH CARD ============ */
.card-wrap { perspective: 1500px; margin-bottom: 16px; }
.card {
  position: relative;
  background: var(--bg-card);
  border-radius: 18px;
  min-height: 360px;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.25s ease, box-shadow 0.25s ease;
  transform-style: preserve-3d;
  box-shadow: var(--card-shadow);
}
.card.flipped { transform: rotateY(180deg); }

.card-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 36px 24px;
  text-align: center;
}
.card-back { transform: rotateY(180deg); }

.card-cat {
  position: absolute;
  top: 16px; left: 20px;
  font-size: 12px;
  font-weight: 500;
  color: var(--label-2);
  letter-spacing: -0.08px;
  text-transform: uppercase;
}

.audio-btn {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--bg-icon);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--label);
}
.audio-btn:active { transform: scale(0.92); background: var(--bg-pressed); }
.audio-btn.playing { background: var(--tint); color: white; }
.audio-btn svg { width: 16px; height: 16px; }
.card-audio { position: absolute; top: 14px; right: 14px; }

.word {
  font-size: clamp(44px, 12vw, 64px);
  font-weight: 700;
  letter-spacing: -1.5px;
  color: var(--label);
  margin-bottom: 14px;
  line-height: 1.05;
  max-width: 100%;
  word-wrap: break-word;
}
.phon { font-size: 15px; font-style: italic; color: var(--label-2); letter-spacing: -0.24px; }
.translation {
  font-size: clamp(28px, 7vw, 38px);
  font-weight: 600;
  color: var(--tint);
  letter-spacing: -0.8px;
  margin-bottom: 14px;
  line-height: 1.1;
}
.example {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 0.5px solid var(--separator);
  max-width: 360px;
}
.example-sq { font-size: 17px; font-weight: 500; color: var(--label); margin-bottom: 2px; }
.example-fr { font-size: 14px; color: var(--label-2); font-style: italic; }

.tap-hint {
  position: absolute;
  bottom: 16px; left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  color: var(--label-3);
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* ============ NAV / ACTIONS ============ */
.nav-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 4px;
  margin-bottom: 16px;
}
.nav-btn {
  font-size: 17px;
  color: var(--tint);
  font-weight: 400;
  padding: 8px 4px;
  letter-spacing: -0.4px;
}
.nav-btn:active { opacity: 0.5; }
.nav-btn:disabled { color: var(--label-3); }
.progress { font-size: 14px; color: var(--label-2); font-variant-numeric: tabular-nums; }

.actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.action {
  padding: 12px 14px 10px;
  border-radius: 14px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  line-height: 1.15;
}
.action-label-fr {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.3px;
}
.action-label-sq {
  font-size: 11px;
  font-weight: 600;
  opacity: 0.62;
  letter-spacing: 0.02em;
  text-transform: lowercase;
  font-style: italic;
}
.action:active { transform: scale(0.98); }
.action.review { background: var(--tint-soft); color: var(--tint); }
.action.review:active { background: var(--tint-soft-2); }
.action.know { background: var(--green-soft); color: var(--green); }
.action.know:active { background: var(--green-soft-2); }

/* ============ QUIZ ============ */
.quiz-card {
  background: var(--bg-card);
  border-radius: 18px;
  padding: 36px 24px;
  text-align: center;
  margin-bottom: 12px;
  box-shadow: var(--card-shadow);
}
.quiz-prompt {
  font-size: 13px;
  font-weight: 500;
  color: var(--label-2);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 16px;
}
.quiz-word {
  font-size: clamp(36px, 9vw, 48px);
  font-weight: 700;
  letter-spacing: -1.2px;
  color: var(--label);
  line-height: 1.05;
  margin-bottom: 8px;
}
.quiz-phon { font-size: 14px; color: var(--label-2); font-style: italic; margin-bottom: 16px; }
.quiz-audio-wrap { display: flex; justify-content: center; }

.quiz-options { display: grid; gap: 10px; }
.opt {
  width: 100%;
  padding: 16px 20px;
  background: var(--bg-card);
  border-radius: 14px;
  font-size: 17px;
  font-weight: 500;
  color: var(--label);
  text-align: left;
  letter-spacing: -0.4px;
  box-shadow: var(--card-shadow);
  position: relative;
  overflow: hidden;
  transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.opt:active:not(:disabled) { transform: scale(0.99); background: var(--bg-pressed); }
.opt.correct {
  background: var(--green-soft);
  color: var(--green);
  font-weight: 700;
  animation: optCorrectPulse 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--green) 40%, transparent),
              0 4px 16px color-mix(in srgb, var(--green) 22%, transparent);
}
.opt.correct::after {
  content: "";
  position: absolute;
  right: 16px;
  top: 50%;
  width: 26px;
  height: 26px;
  margin-top: -13px;
  border-radius: 50%;
  background: var(--green);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px 16px;
  animation: optCheckPop 0.45s 0.05s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}
.opt.wrong {
  background: var(--tint-soft);
  color: var(--tint);
  font-weight: 700;
  animation: optShake 0.45s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}
.opt.wrong::after {
  content: "";
  position: absolute;
  right: 16px;
  top: 50%;
  width: 26px;
  height: 26px;
  margin-top: -13px;
  border-radius: 50%;
  background: var(--tint);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><line x1='18' y1='6' x2='6' y2='18'/><line x1='6' y1='6' x2='18' y2='18'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px 14px;
  animation: optCheckPop 0.35s 0.05s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}
.opt:disabled { transform: none; cursor: default; }
.opt:disabled:not(.correct):not(.wrong) { opacity: 0.45; }

/* [v192] === ADMIN HUB (tableau de bord unifié des outils admin) === */
.admin-hub-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  z-index: 1400;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: chatSlideUp 0.22s ease;
}
.admin-hub-overlay.hidden { display: none; }
.admin-hub-modal {
  background: var(--bg-page);
  border-radius: 24px 24px 0 0;
  width: 100%;
  max-width: 560px;
  /* [v194] Hauteur fixe : le modal ne change plus de taille entre les onglets.
     Le body scrolle dedans, le header + tabs restent fixes en haut. */
  height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 -10px 40px rgba(0,0,0,0.25);
  overflow: hidden;
}
@media (min-width: 700px) {
  .admin-hub-overlay { align-items: center; padding: 24px; }
  .admin-hub-modal { border-radius: 24px; height: 80vh; max-height: 720px; }
}
.admin-hub-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 20px 14px;
  border-bottom: 1px solid var(--border);
}
.admin-hub-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}
.admin-hub-icon { font-size: 22px; }
.admin-hub-tabs {
  display: flex;
  gap: 6px;
  padding: 12px 16px 0;
  background: var(--bg-page);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.admin-hub-tab {
  background: transparent;
  border: 0;
  padding: 10px 14px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 10px 10px 0 0;
  position: relative;
  white-space: nowrap;
  transition: color 0.15s ease;
}
.admin-hub-tab:hover { color: var(--text-primary); }
.admin-hub-tab.active { color: var(--tint); }
.admin-hub-tab.active::after {
  content: "";
  position: absolute;
  left: 8px; right: 8px; bottom: -1px;
  height: 2px;
  background: var(--tint);
  border-radius: 2px 2px 0 0;
}
.admin-hub-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  -webkit-overflow-scrolling: touch;
}
.admin-hub-pane.hidden { display: none; }
.admin-hub-pane-intro {
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 18px;
  line-height: 1.5;
}
.admin-hub-pane-note {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 10px;
  font-style: italic;
}
.admin-hub-action-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px 18px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.15s ease;
}
.admin-hub-action-btn:hover {
  border-color: var(--tint);
  background: color-mix(in srgb, var(--tint) 4%, var(--bg-card));
  transform: translateY(-1px);
}
.admin-hub-action-btn svg { width: 18px; height: 18px; color: var(--text-muted); flex-shrink: 0; }
.admin-hub-form-group { margin-bottom: 16px; }
.admin-hub-label {
  display: block;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.admin-hub-input,
.admin-hub-textarea {
  width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 15px;
  color: var(--text-primary);
  outline: none;
  transition: border-color 0.15s ease;
  resize: vertical;
}
.admin-hub-input:focus,
.admin-hub-textarea:focus { border-color: var(--tint); }
.admin-hub-char-counter {
  text-align: right;
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 600;
  margin-top: 4px;
}
.admin-hub-help {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
}
.admin-hub-help code {
  background: var(--bg-card);
  padding: 1px 6px;
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 11px;
}
.admin-hub-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.admin-hub-pill {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 99px;
  padding: 8px 14px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
}
.admin-hub-pill:hover { background: var(--bg-elev); }
.admin-hub-pill.active { background: var(--tint); color: #fff; border-color: var(--tint); }
.admin-hub-preview-label {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin: 18px 0 8px;
}
.admin-hub-preview {
  display: flex;
  gap: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.admin-hub-preview-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: linear-gradient(135deg, #FF3B30, #FF6B30);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}
.admin-hub-preview-body { flex: 1; min-width: 0; }
.admin-hub-preview-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.admin-hub-preview-text {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.admin-hub-send-btn {
  width: 100%;
  margin-top: 18px;
  background: var(--tint);
  color: #fff;
  border: 0;
  border-radius: 14px;
  padding: 14px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}
.admin-hub-send-btn:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.05); }
.admin-hub-send-btn:disabled { opacity: 0.5; cursor: wait; }
.admin-hub-warn {
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
  margin-top: 10px;
  font-style: italic;
}
.admin-hub-result {
  margin-top: 14px;
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
  background: color-mix(in srgb, #34C759 12%, transparent);
  color: #34C759;
}
.admin-hub-result.hidden { display: none; }
.admin-hub-result.error {
  background: color-mix(in srgb, var(--tint) 12%, transparent);
  color: var(--tint);
}

/* [v195] Bouton refresh stats inline + container stats */
.admin-hub-refresh-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 99px;
  padding: 6px 12px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
  cursor: pointer;
  margin-bottom: 14px;
  transition: all 0.15s ease;
}
.admin-hub-refresh-btn:hover { background: var(--bg-elev); color: var(--text-primary); }
.admin-hub-refresh-btn svg { color: var(--text-muted); }
.admin-hub-stats-body {
  /* Hérite du style de admin-stats-body (sections / rows / top users)
     [v198] gap explicite entre les sections + flex column comme admin-stats-body */
  min-height: 100px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.admin-hub-recorder-body {
  /* [v196] Container inline pour l'enregistreur audio dans le Hub admin */
  min-height: 100px;
}

/* [v197] Templates pré-faits broadcast push */
.admin-hub-templates {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 8px;
}
@media (max-width: 420px) {
  .admin-hub-templates { grid-template-columns: repeat(2, 1fr); }
}
.admin-hub-template {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 6px;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.15s ease;
}
.admin-hub-template:hover {
  border-color: var(--tint);
  background: color-mix(in srgb, var(--tint) 4%, var(--bg-card));
  transform: translateY(-1px);
}
.admin-hub-template:active { transform: translateY(0); }
.admin-hub-template-icon {
  font-size: 22px;
  line-height: 1;
}
.admin-hub-template-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
}

/* === ADMIN STATS OVERLAY === */
.admin-stats-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 1500;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.25s ease;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.admin-stats-overlay:not(.hidden) { opacity: 1; }
.admin-stats-modal {
  background: var(--bg-page);
  border-radius: 24px 24px 0 0;
  width: 100%;
  max-width: 560px;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform 0.32s cubic-bezier(0.34, 1.36, 0.64, 1);
  box-shadow: 0 -8px 32px rgba(0,0,0,0.25);
}
.admin-stats-overlay:not(.hidden) .admin-stats-modal {
  transform: translateY(0);
}
@media (min-width: 700px) {
  .admin-stats-overlay {
    align-items: center;
    padding: 24px;
  }
  .admin-stats-modal {
    border-radius: 24px;
    max-height: calc(100vh - 48px);
  }
}
.admin-stats-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px 16px;
  border-bottom: 0.5px solid var(--separator);
}
.admin-stats-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}
.admin-stats-icon { font-size: 22px; }
.admin-stats-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 24px; /* [v198] +4px pour mieux séparer les sections */
}
.admin-stats-loading {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-secondary);
  font-size: 14px;
}
.admin-stats-section {
  display: flex;
  flex-direction: column;
  gap: 10px; /* [v198] de 6 à 10 entre le label et les rows */
}
.admin-stats-section-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  padding-left: 4px;
}
.admin-stats-rows {
  background: var(--bg-card);
  border-radius: 14px;
  overflow: hidden;
}
.admin-stats-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 12px 16px;
  border-bottom: 0.5px solid var(--separator);
  gap: 12px;
}
.admin-stats-row:last-child { border-bottom: 0; }
.admin-stats-row-label {
  font-size: 14px;
  color: var(--text-primary);
  font-weight: 500;
  min-width: 0;
  flex: 1;
}
.admin-stats-row-value {
  font-size: 16px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.admin-stats-row-value.admin-stats-row-value-tint { color: var(--tint); }
.admin-stats-row-value-sub {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-left: 4px;
}
.admin-stats-top {
  background: var(--bg-card);
  border-radius: 14px;
  overflow: hidden;
}
.admin-stats-top-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 0.5px solid var(--separator);
}
.admin-stats-top-row:last-child { border-bottom: 0; }
.admin-stats-top-rank {
  font-size: 13px;
  font-weight: 800;
  color: var(--text-secondary);
  width: 22px;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.admin-stats-top-email {
  flex: 1;
  font-size: 13px;
  color: var(--text-primary);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-stats-top-xp {
  font-size: 13px;
  font-weight: 800;
  color: var(--tint);
  font-variant-numeric: tabular-nums;
}
.admin-stats-top-streak {
  font-size: 11px;
  color: var(--text-secondary);
  margin-left: 6px;
}
.admin-stats-footer {
  padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
  border-top: 0.5px solid var(--separator);
  display: flex;
  justify-content: center;
}
.admin-stats-refresh {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: 1px solid var(--border, rgba(120,120,128,0.16));
  background: var(--bg-card);
  border-radius: 12px;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}
.admin-stats-refresh:hover { background: var(--bg-pressed); }
.admin-stats-refresh:active { transform: scale(0.97); }
.admin-stats-refresh svg { width: 16px; height: 16px; }
.admin-stats-generated {
  text-align: center;
  font-size: 11px;
  color: var(--text-secondary);
  padding: 8px 0 0;
}
.admin-stats-error {
  text-align: center;
  padding: 24px 20px;
  color: var(--tint);
  font-size: 14px;
}

/* === ADMIN LIVE TRACKING (top of admin dashboard) ===
   Section qui affiche le tracking en temps réel : compteur visiteurs actifs + feed d'activité. */
.admin-live-section {
  background: linear-gradient(135deg,
    color-mix(in srgb, #34C759 8%, var(--bg-card)),
    color-mix(in srgb, var(--tint) 4%, var(--bg-card))
  );
  border: 1px solid color-mix(in srgb, #34C759 25%, var(--border));
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 18px;
}
.admin-live-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.admin-live-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #15803D;
}
[data-theme="dark"] .admin-live-title { color: #6EE7B7; }
.admin-live-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #999;
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  transition: background 0.2s ease;
}
.admin-live-dot.admin-live-dot-online {
  background: #34C759;
  box-shadow: 0 0 0 0 rgba(52, 199, 89, 0.6);
  animation: adminLivePulse 2s infinite;
}
@keyframes adminLivePulse {
  0%   { box-shadow: 0 0 0 0   rgba(52, 199, 89, 0.6); }
  70%  { box-shadow: 0 0 0 8px rgba(52, 199, 89, 0); }
  100% { box-shadow: 0 0 0 0   rgba(52, 199, 89, 0); }
}
.admin-live-dot-pulse {
  animation: adminLivePulseStrong 0.6s ease-out;
}
@keyframes adminLivePulseStrong {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.6); }
  100% { transform: scale(1); }
}
.admin-live-stat {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}
.admin-live-count {
  font-size: 24px;
  font-weight: 800;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.admin-live-subtitle {
  font-size: 12px;
  color: var(--text-secondary);
}

.admin-live-feed-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.admin-live-feed {
  max-height: 240px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  scrollbar-width: thin;
}
.admin-live-empty {
  text-align: center;
  padding: 16px 12px;
  font-size: 12px;
  color: var(--text-secondary);
  font-style: italic;
}
.admin-live-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 13px;
  transition: background 0.2s ease;
}
.admin-live-row-new {
  animation: adminLiveRowIn 0.4s ease-out;
  background: color-mix(in srgb, #34C759 10%, var(--bg-card));
  border-color: color-mix(in srgb, #34C759 35%, var(--border));
}
@keyframes adminLiveRowIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0);   }
}
.admin-live-row-icon {
  font-size: 16px;
  flex-shrink: 0;
  width: 22px;
  text-align: center;
  line-height: 1;
}
.admin-live-row-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.admin-live-row-name {
  font-weight: 600;
  color: var(--text-primary);
  font-size: 13px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.admin-live-row-meta {
  font-size: 11px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.admin-live-row-age {
  font-size: 11px;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

/* === EMAIL CONFIRMED OVERLAY ===
   Popup affiché après que l'user a cliqué sur le lien de confirmation Supabase.
   UX : gros check vert, message rassurant, bouton "Se connecter" qui ferme. */
.email-confirmed-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: emailConfirmedFadeIn 0.3s ease both;
}
.email-confirmed-overlay.fade-out {
  animation: emailConfirmedFadeOut 0.2s ease both;
}
@keyframes emailConfirmedFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes emailConfirmedFadeOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}
.email-confirmed-modal {
  background: var(--bg-card);
  border-radius: 20px;
  padding: 32px 24px 24px;
  max-width: 380px;
  width: 100%;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  animation: emailConfirmedScale 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes emailConfirmedScale {
  from { transform: scale(0.88); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}
.email-confirmed-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 18px;
  animation: emailConfirmedBounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s both;
}
@keyframes emailConfirmedBounce {
  0%   { transform: scale(0); }
  50%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}
.email-confirmed-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  margin: 0 0 10px;
}
.email-confirmed-text {
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0 0 22px;
}
.email-confirmed-btn {
  display: block;
  width: 100%;
  background: var(--tint);
  color: white;
  border: 0;
  border-radius: 12px;
  padding: 14px 20px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.2s ease;
}
.email-confirmed-btn:hover { background: color-mix(in srgb, var(--tint) 90%, black); }
.email-confirmed-btn:active { transform: scale(0.97); }
.email-confirmed-foot {
  margin-top: 14px;
  font-size: 13px;
  color: var(--text-secondary);
  font-style: italic;
}

/* ============ RESET PASSWORD OVERLAY (v164) ============ */
.reset-pwd-overlay {
  position: fixed;
  inset: 0;
  z-index: 2100;
  background: rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: emailConfirmedFadeIn 0.3s ease both;
}
.reset-pwd-overlay.hidden { display: none; }
.reset-pwd-modal {
  background: var(--bg-card);
  border-radius: 20px;
  padding: 32px 24px 24px;
  max-width: 380px;
  width: 100%;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  animation: emailConfirmedScale 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.reset-pwd-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 18px;
  animation: emailConfirmedBounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s both;
}
.reset-pwd-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  margin: 0 0 10px;
}
.reset-pwd-sub {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0 0 20px;
}
.reset-pwd-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 14px 16px;
  background: var(--bg-elev);
  border: 1.5px solid transparent;
  border-radius: 12px;
  font-size: 15px;
  font-family: inherit;
  color: var(--text-primary);
  margin-bottom: 10px;
  transition: border-color 0.15s;
}
.reset-pwd-input:focus {
  outline: none;
  border-color: var(--tint);
}
.reset-pwd-error {
  background: color-mix(in srgb, var(--tint) 12%, transparent);
  color: var(--tint);
  font-size: 13px;
  padding: 10px 12px;
  border-radius: 8px;
  margin: 4px 0 12px;
  line-height: 1.4;
  text-align: left;
}
.reset-pwd-submit {
  display: block;
  width: 100%;
  background: var(--tint);
  color: white;
  border: 0;
  border-radius: 12px;
  padding: 14px 20px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  margin-top: 6px;
  transition: transform 0.15s ease, background 0.2s ease;
}
.reset-pwd-submit:hover { background: color-mix(in srgb, var(--tint) 90%, black); }
.reset-pwd-submit:active { transform: scale(0.98); }
.reset-pwd-submit:disabled { opacity: 0.6; cursor: not-allowed; }
.reset-pwd-foot {
  margin-top: 14px;
  font-size: 13px;
  color: var(--text-secondary);
  font-style: italic;
}

/* [v186] === REVIEW OVERLAY (laisser un avis) === */
.review-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 1200;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: chatSlideUp 0.22s ease;
}
.review-overlay.hidden { display: none; }
.review-modal {
  background: var(--bg-page);
  border-radius: 24px 24px 0 0;
  width: 100%;
  max-width: 560px;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 -10px 40px rgba(0,0,0,0.2);
  overflow: hidden;
}
@media (min-width: 700px) {
  .review-overlay { align-items: center; padding: 24px; }
  .review-modal { border-radius: 24px; max-height: 92vh; }
}
.review-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 20px 16px;
  border-bottom: 1px solid var(--border);
}
.review-title {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}
.review-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 20px 24px;
}
.review-intro {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 20px;
}
.review-section-label {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin: 16px 0 8px;
}
.review-section-label:first-child { margin-top: 0; }
.review-stars-input {
  display: flex;
  gap: 6px;
  justify-content: center;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 12px;
}
.review-star {
  background: transparent;
  border: 0;
  font-size: 36px;
  color: var(--border);
  cursor: pointer;
  padding: 4px 8px;
  transition: transform 0.15s ease, color 0.15s ease;
  line-height: 1;
}
.review-star:hover { transform: scale(1.15); }
.review-star.filled { color: #FFC107; }
.review-rating-text {
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-secondary);
  margin-top: 8px;
  min-height: 18px;
}
.review-input,
.review-textarea {
  width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 15px;
  color: var(--text-primary);
  outline: none;
  transition: border-color 0.15s ease;
  resize: vertical;
}
.review-input:focus,
.review-textarea:focus { border-color: var(--tint); }
.review-char-counter {
  text-align: right;
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 600;
  margin-top: 4px;
}
.review-error {
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--tint) 8%, transparent);
  color: var(--tint);
  font-size: 13px;
  font-weight: 600;
}
.review-submit {
  width: 100%;
  margin-top: 18px;
  background: var(--tint);
  color: #fff;
  border: 0;
  border-radius: 14px;
  padding: 14px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}
.review-submit:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.05); }
.review-submit:disabled { opacity: 0.5; cursor: wait; }
.review-view-public {
  width: 100%;
  margin-top: 10px;
  background: transparent;
  color: var(--text-secondary);
  border: 0;
  padding: 10px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.review-view-public:hover { color: var(--tint); }

/* [v187] === INSTALL PWA banner (home Aujourd'hui) === */
.install-cta {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, #FF3B30 0%, #FF6B30 100%);
  color: #fff;
  border-radius: 14px;
  padding: 14px 14px 14px 16px;
  margin-bottom: 16px;
  box-shadow: 0 6px 20px color-mix(in srgb, #FF3B30 25%, transparent);
  animation: installCtaIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.install-cta.hidden { display: none; }
@keyframes installCtaIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}
.install-cta-close {
  position: absolute;
  top: 6px;
  right: 6px;
  background: rgba(255,255,255,0.18);
  border: 0;
  color: #fff;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.15s ease;
}
.install-cta-close:hover { background: rgba(255,255,255,0.3); }
.install-cta-icon {
  font-size: 30px;
  flex-shrink: 0;
  line-height: 1;
}
.install-cta-body { flex: 1; min-width: 0; padding-right: 8px; }
.install-cta-title {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.install-cta-sub {
  font-size: 12px;
  opacity: 0.92;
  margin-top: 2px;
  line-height: 1.3;
}
.install-cta-btn {
  background: #fff;
  color: #FF3B30;
  border: 0;
  border-radius: 10px;
  padding: 9px 14px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.install-cta-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.15); }

/* [v225] Bandeau recrutement bêta-testeurs Play Store — Android uniquement.
   Fond vert pour distinguer du rouge install-cta (peuvent coexister).
   Même structure que .install-cta pour cohérence visuelle. */
.playstore-cta {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, #34C759 0%, #30B0C7 100%);
  color: #fff;
  border-radius: 14px;
  padding: 14px 14px 14px 16px;
  margin-bottom: 16px;
  box-shadow: 0 6px 20px color-mix(in srgb, #34C759 25%, transparent);
  animation: installCtaIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.playstore-cta.hidden { display: none; }

/* [v236] Bannière parrainage : même structure que .playstore-cta mais gradient orange→rouge
   (différentié visuellement, ton "récompense" plutôt que "soutien beta"). */
.referral-cta {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, #FF9500 0%, #FF3B30 100%);
  color: #fff;
  border-radius: 14px;
  padding: 14px 14px 14px 16px;
  margin-bottom: 16px;
  box-shadow: 0 6px 20px color-mix(in srgb, #FF9500 25%, transparent);
  animation: installCtaIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.referral-cta.hidden { display: none; }
/* On hérite des autres styles .playstore-cta-* via classes communes appliquées
   directement dans le HTML (close, icon, body, title, sub, btn) */
.playstore-cta-close {
  position: absolute;
  top: 6px; right: 6px;
  background: rgba(255,255,255,0.18);
  border: 0; color: #fff;
  width: 24px; height: 24px;
  border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  transition: background 0.15s ease;
}
.playstore-cta-close:hover { background: rgba(255,255,255,0.3); }
.playstore-cta-icon { font-size: 30px; flex-shrink: 0; line-height: 1; }
.playstore-cta-body { flex: 1; min-width: 0; padding-right: 8px; }
.playstore-cta-title {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.playstore-cta-sub {
  font-size: 12px;
  opacity: 0.92;
  margin-top: 2px;
  line-height: 1.3;
}
.playstore-cta-sub strong { font-weight: 800; }
.playstore-cta-btn {
  background: #fff;
  color: #34C759;
  border: 0;
  border-radius: 10px;
  padding: 9px 14px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.playstore-cta-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.15); }

/* iOS install modal (instructions visuelles 3 étapes) */
/* [v191] iOS install modal — design premium refait
   Bottom sheet propre, étapes avec numéros gradient, mockup Safari réaliste,
   scroll lock robuste pour pas que le body scrolle derrière */
.ios-install-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  z-index: 1300;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: iosInstallFade 0.25s ease;
  overscroll-behavior: contain;
  touch-action: none;
}
.ios-install-overlay.hidden { display: none; }
@keyframes iosInstallFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.ios-install-modal {
  background: var(--bg-page);
  border-radius: 28px 28px 0 0;
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 -16px 60px rgba(0,0,0,0.25);
  overflow: hidden;
  overscroll-behavior: contain;
  animation: iosInstallSlideUp 0.35s cubic-bezier(0.32, 0.72, 0.32, 1);
}
@keyframes iosInstallSlideUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
@media (min-width: 700px) {
  .ios-install-overlay { align-items: center; padding: 24px; }
  .ios-install-modal { border-radius: 28px; max-height: 86vh; }
}
.ios-install-header {
  position: relative;
  padding: 14px 22px 8px;
  text-align: center;
  flex-shrink: 0;
}
.ios-install-handle {
  width: 36px;
  height: 4px;
  background: var(--border);
  border-radius: 99px;
  margin: 0 auto 18px;
}
.ios-install-hero-icon {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: linear-gradient(135deg, #FF3B30, #FF6B30);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  margin: 0 auto 14px;
  box-shadow: 0 8px 24px color-mix(in srgb, #FF3B30 35%, transparent);
}
.ios-install-title {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--text-primary);
  margin-bottom: 6px;
  line-height: 1.2;
}
.ios-install-subtitle {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 4px;
}
.ios-install-close {
  position: absolute;
  top: 14px;
  right: 14px;
  background: var(--bg-elev);
  border: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-secondary);
  transition: background 0.15s ease;
}
.ios-install-close:hover { background: var(--border); }
.ios-install-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px 24px;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.ios-install-steps {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 18px;
}
.ios-install-step {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.ios-install-step:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.04);
}
.ios-install-step-num {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FF3B30, #FF6B30);
  color: #fff;
  font-weight: 800;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  letter-spacing: -0.01em;
  box-shadow: 0 2px 6px color-mix(in srgb, #FF3B30 30%, transparent);
}
.ios-install-step-content { flex: 1; min-width: 0; }
.ios-install-step-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.ios-install-step-sub {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.45;
}
.ios-install-step-visual {
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  background: linear-gradient(135deg, #F8F8FA 0%, #F0F0F4 100%);
  border-radius: 10px;
  color: #0a84ff;
}
@media (prefers-color-scheme: dark) {
  .ios-install-step-visual { background: linear-gradient(135deg, #1c1c1e 0%, #2c2c2e 100%); color: #0a84ff; }
}
.ios-install-step-visual.is-emoji { font-size: 28px; color: inherit; }
.ios-install-warning {
  margin-top: 8px;
  padding: 12px 16px;
  background: color-mix(in srgb, #FF9500 12%, transparent);
  border: 1px solid color-mix(in srgb, #FF9500 30%, transparent);
  border-radius: 12px;
  font-size: 13px;
  color: var(--text-primary);
  display: flex;
  align-items: flex-start;
  gap: 10px;
  line-height: 1.45;
}
.ios-install-warning-emoji { font-size: 16px; flex-shrink: 0; line-height: 1.4; }

/* === REFERRAL OVERLAY === */
.referral-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 1500;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.25s ease;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.referral-overlay:not(.hidden) { opacity: 1; }
.referral-modal {
  background: var(--bg-page);
  border-radius: 24px 24px 0 0;
  width: 100%;
  max-width: 560px;
  height: 92vh;  /* Hauteur fixe et non max-height pour que flex-1 + overflow marchent */
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform 0.32s cubic-bezier(0.34, 1.36, 0.64, 1);
  box-shadow: 0 -8px 32px rgba(0,0,0,0.25);
  overflow: hidden;  /* Empêche le débordement, le scroll se fait dans .referral-body */
}
.referral-overlay:not(.hidden) .referral-modal {
  transform: translateY(0);
}
@media (min-width: 700px) {
  .referral-overlay { align-items: center; padding: 24px; }
  .referral-modal { border-radius: 24px; height: calc(100vh - 48px); max-height: calc(100vh - 48px); }
}
.referral-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px 16px;
  border-bottom: 0.5px solid var(--separator);
  flex-shrink: 0;  /* Header ne shrink jamais */
}
.referral-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}
.referral-icon { font-size: 22px; }
.referral-body {
  flex: 1 1 auto;
  /* Hauteur calculée explicitement en fallback de flex: 1 sur iOS bugué */
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;  /* iOS Safari fix : autorise explicitement le scroll vertical */
  padding: 20px 20px calc(24px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-height: 0;  /* Permet à flex-1 + overflow auto de fonctionner */
}
.referral-loading {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-secondary);
  font-size: 14px;
}

/* ============================================================
   WRAPPED OVERLAY (résumé partageable)
   ============================================================ */
.wrapped-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 1500;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.25s ease;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.wrapped-overlay:not(.hidden) { opacity: 1; }
.wrapped-modal {
  background: var(--bg-page);
  border-radius: 24px 24px 0 0;
  width: 100%;
  max-width: 560px;
  height: 92vh;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform 0.32s cubic-bezier(0.34, 1.36, 0.64, 1);
  box-shadow: 0 -8px 32px rgba(0,0,0,0.25);
  overflow: hidden;
}
.wrapped-overlay:not(.hidden) .wrapped-modal { transform: translateY(0); }
@media (min-width: 700px) {
  .wrapped-overlay { align-items: center; padding: 24px; }
  .wrapped-modal { border-radius: 24px; height: calc(100vh - 48px); max-height: calc(100vh - 48px); }
}
.wrapped-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px 16px;
  border-bottom: 0.5px solid var(--separator);
  flex-shrink: 0;
}
.wrapped-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}
.wrapped-icon { font-size: 22px; }
.wrapped-body {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  padding: 20px 20px calc(20px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-height: 0;
}

/* Period selector : ce mois / tout */
.wrapped-period-selector {
  display: flex;
  background: var(--bg-elev);
  border-radius: 12px;
  padding: 4px;
  gap: 2px;
}
.wrapped-period-btn {
  flex: 1;
  background: transparent;
  border: none;
  padding: 8px 12px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-secondary);
  border-radius: 9px;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}
.wrapped-period-btn.active {
  background: var(--bg-card);
  color: var(--text-primary);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

/* Preview wrapper : ratio 9:16 pour story */
.wrapped-preview-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 9/16;
  background: var(--bg-elev);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wrapped-preview-canvas {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.wrapped-preview-canvas.hidden { display: none; }
.wrapped-preview-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
}
.wrapped-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--bg-card);
  border-top-color: var(--tint);
  border-radius: 50%;
  animation: bootSpin 0.7s linear infinite;
}

/* Actions */
.wrapped-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.wrapped-action {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 16px;
  border-radius: 14px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}
.wrapped-action:disabled { opacity: 0.5; cursor: not-allowed; }
.wrapped-action:not(:disabled):active { transform: scale(0.98); }
.wrapped-action-primary {
  background: var(--tint);
  color: white;
  border: none;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--tint) 30%, transparent);
}
.wrapped-action-secondary {
  background: var(--bg-card);
  color: var(--text-primary);
  border: 1px solid var(--border);
}
.wrapped-action svg { width: 18px; height: 18px; }

.wrapped-hint {
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-secondary);
  padding: 12px 14px;
  background: var(--bg-elev);
  border-radius: 12px;
}

/* HÉRO : Code à partager */
.referral-hero {
  background: linear-gradient(135deg, var(--tint) 0%, color-mix(in srgb, var(--tint) 70%, #FF9500) 100%);
  border-radius: 20px;
  padding: 24px 20px;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  box-shadow: 0 6px 20px color-mix(in srgb, var(--tint) 25%, transparent);
}
.referral-hero-label {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.85);
}
.referral-code {
  font-size: 36px;
  font-weight: 900;
  letter-spacing: 0.12em;
  font-family: 'SF Mono', Menlo, Monaco, 'Courier New', monospace;
  background: rgba(255,255,255,0.18);
  padding: 10px 20px;
  border-radius: 14px;
  border: 1.5px dashed rgba(255,255,255,0.4);
  cursor: pointer;
  user-select: all;
  transition: background 0.15s ease, transform 0.15s ease;
}
.referral-code:hover { background: rgba(255,255,255,0.25); }
.referral-code:active { transform: scale(0.97); }
.referral-actions {
  display: flex;
  gap: 10px;
  width: 100%;
}
.referral-action-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 14px;
  border: 0;
  background: rgba(255,255,255,0.2);
  color: #fff;
  border-radius: 12px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}
.referral-action-btn:hover { background: rgba(255,255,255,0.3); }
.referral-action-btn:active { transform: scale(0.97); }
.referral-action-btn svg { width: 16px; height: 16px; }
.referral-action-btn-primary {
  background: #fff;
  color: var(--tint);
}
.referral-action-btn-primary:hover { background: rgba(255,255,255,0.92); }

/* Sections */
.referral-section-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  padding-left: 4px;
  margin-bottom: -10px;
}

/* Steps */
.referral-steps {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.referral-step {
  display: flex;
  gap: 14px;
  padding: 14px 16px;
  background: var(--bg-card);
  border-radius: 14px;
  align-items: flex-start;
}
.referral-step-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--tint);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 800;
  flex-shrink: 0;
}
.referral-step-body { flex: 1; min-width: 0; }
.referral-step-title {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.35;
  margin-bottom: 4px;
}
.referral-step-desc {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.4;
}

/* Stats */
.referral-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.referral-stat {
  background: var(--bg-card);
  border-radius: 14px;
  padding: 16px 12px;
  text-align: center;
}
.referral-stat-value {
  font-size: 28px;
  font-weight: 900;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.referral-stat-value-success { color: var(--green, #34C759); }
.referral-stat-label {
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 600;
  margin-top: 4px;
}

/* Recent */
.referral-recent {
  background: var(--bg-card);
  border-radius: 14px;
  overflow: hidden;
}
.referral-recent-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  border-bottom: 0.5px solid var(--separator);
}
.referral-recent-row:last-child { border-bottom: 0; }
.referral-recent-date {
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: 600;
}
.referral-recent-status {
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 10px;
}
.referral-status-validated {
  background: color-mix(in srgb, var(--green, #34C759) 15%, var(--bg-card));
  color: var(--green, #34C759);
}
.referral-status-pending {
  background: color-mix(in srgb, #FF9500 12%, var(--bg-card));
  color: #FF9500;
}

/* Footer note */
.referral-footer-note {
  text-align: center;
  font-size: 11px;
  color: var(--text-secondary);
  padding: 0 8px;
  line-height: 1.4;
}

/* === INSTALL APP INSTRUCTIONS OVERLAY === */
.install-instructions-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 1500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  transition: opacity 0.25s ease;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  overflow-y: auto;
}
.install-instructions-overlay.install-instructions-visible { opacity: 1; }
.install-instructions-modal {
  background: var(--bg-card);
  border-radius: 24px;
  padding: 28px 24px 26px;
  max-width: 440px;
  width: 100%;
  position: relative;
  transform: scale(0.85) translateY(20px);
  transition: transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 24px 64px rgba(0,0,0,0.35);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.install-instructions-overlay.install-instructions-visible .install-instructions-modal {
  transform: scale(1) translateY(0);
}
.install-instructions-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bg-elev);
  color: var(--text-secondary);
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
}
.install-instructions-close:hover { background: var(--bg-pressed); }
.install-instructions-close svg { width: 14px; height: 14px; }
.install-instructions-emoji {
  font-size: 48px;
  text-align: center;
  line-height: 1;
  margin-bottom: 10px;
}
.install-instructions-title {
  text-align: center;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin-bottom: 4px;
}
.install-instructions-sub {
  text-align: center;
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 24px;
}
.install-steps {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.install-step {
  display: flex;
  gap: 14px;
  padding: 14px 16px;
  background: var(--bg-elev);
  border-radius: 14px;
  align-items: flex-start;
}
.install-step-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--tint);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 800;
  flex-shrink: 0;
}
.install-step-body { flex: 1; min-width: 0; }
.install-step-title {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.35;
  margin-bottom: 4px;
}
.install-step-desc {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.4;
}

/* === SESSION COMPLETE OVERLAY (fin de quiz 15/15) === */
.session-complete-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 1500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  transition: opacity 0.25s ease;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  overflow-y: auto;
}

/* Layer confettis qui tombent depuis le top */
.sc-confetti-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}
.sc-confetti {
  position: absolute;
  top: -20px;
  opacity: 0;
  transform: translateY(0) translateX(0) rotate(0deg);
  animation-name: scConfettiFall;
  animation-timing-function: cubic-bezier(0.36, 0, 0.66, 1);
  animation-fill-mode: forwards;
}
.sc-confetti-circle { border-radius: 50%; }
.sc-confetti-rect { border-radius: 2px; }
@keyframes scConfettiFall {
  0%   { opacity: 0; transform: translateY(0) translateX(0) rotate(0); }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% {
    opacity: 0;
    transform: translateY(110vh) translateX(var(--drift, 0)) rotate(var(--rot, 360deg));
  }
}

.session-complete-overlay.session-complete-visible { opacity: 1; }
.session-complete-modal {
  background: var(--bg-card);
  border-radius: 24px;
  padding: 28px 24px 22px;
  max-width: 440px;
  width: 100%;
  position: relative;
  z-index: 2;
  transform: scale(0.85) translateY(20px);
  transition: transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 24px 64px rgba(0,0,0,0.35);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.session-complete-overlay.session-complete-visible .session-complete-modal {
  transform: scale(1) translateY(0);
}
.session-complete-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bg-elev);
  color: var(--text-secondary);
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
  z-index: 1;
}
.session-complete-close:hover { background: var(--bg-pressed); }
.session-complete-close svg { width: 14px; height: 14px; }

.session-complete-emoji {
  font-size: 64px;
  line-height: 1;
  text-align: center;
  margin-bottom: 6px;
  animation: sessionCompleteBounce 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes sessionCompleteBounce {
  0%   { transform: scale(0) rotate(-15deg); opacity: 0; }
  60%  { transform: scale(1.2) rotate(8deg); opacity: 1; }
  80%  { transform: scale(0.92) rotate(-2deg); }
  100% { transform: scale(1) rotate(0); }
}
.session-complete-title {
  text-align: center;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin-bottom: 16px;
}

/* Score : gros chiffre + total */
.session-complete-score {
  text-align: center;
  margin-bottom: 18px;
  padding: 16px 0;
  background: var(--bg-elev);
  border-radius: 14px;
}
.session-complete-score-big {
  font-size: 56px;
  font-weight: 900;
  letter-spacing: -0.04em;
  color: var(--tint);
  line-height: 1;
}
.session-complete-score-total {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-secondary);
  letter-spacing: -0.02em;
  margin-left: 4px;
}
.session-complete-modal[data-tone="perfect"] .session-complete-score-big { color: #FFB800; }
.session-complete-modal[data-tone="great"] .session-complete-score-big { color: var(--green, #34C759); }
.session-complete-modal[data-tone="encouragement"] .session-complete-score-big { color: var(--text-primary); }

/* Stats row */
.session-complete-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  gap: 8px;
  margin-bottom: 20px;
}
.session-complete-stat {
  text-align: center;
  padding: 10px 8px;
  background: var(--bg-elev);
  border-radius: 10px;
}
.session-complete-stat-val {
  font-size: 18px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  margin-bottom: 2px;
}
.session-complete-stat-lbl {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* No errors */
.session-complete-no-errors {
  text-align: center;
  padding: 18px;
  background: color-mix(in srgb, var(--green, #34C759) 10%, var(--bg-elev));
  border-radius: 12px;
  margin-bottom: 20px;
  font-size: 14px;
  font-weight: 700;
  color: var(--green, #34C759);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.session-complete-no-errors-emoji { font-size: 22px; }

/* Liste erreurs */
.session-complete-errors-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 10px;
  padding-left: 4px;
}
.session-complete-errors {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
  max-height: 280px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.session-complete-error {
  background: var(--bg-elev);
  border-radius: 10px;
  padding: 10px 14px;
  border-left: 3px solid var(--tint);
}
.session-complete-error-sq {
  font-size: 15px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.session-complete-error-fr {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 2px;
  line-height: 1.3;
}
.session-complete-error-phon {
  font-size: 11px;
  color: var(--text-muted, var(--text-secondary));
  font-style: italic;
  margin-top: 2px;
}
.session-complete-error-more {
  text-align: center;
  font-size: 12px;
  color: var(--text-secondary);
  padding: 8px;
  font-style: italic;
}

/* Actions */
.session-complete-actions {
  display: flex;
  gap: 10px;
}
.session-complete-btn {
  flex: 1;
  padding: 13px 16px;
  border: 0;
  border-radius: 12px;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: -0.01em;
  transition: all 0.15s ease;
}
.session-complete-btn:active { transform: scale(0.97); }
.session-complete-btn-secondary {
  background: var(--bg-elev);
  color: var(--text-primary);
}
.session-complete-btn-secondary:hover { background: var(--bg-pressed); }
.session-complete-btn-primary {
  background: var(--tint);
  color: #fff;
}
.session-complete-btn-primary:hover { filter: brightness(1.05); transform: translateY(-1px); }
.session-complete-btn-share {
  flex: 0 0 48px;
  background: var(--bg-elev);
  color: var(--tint);
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.session-complete-btn-share svg { width: 20px; height: 20px; }
.session-complete-btn-share:hover {
  background: color-mix(in srgb, var(--tint) 12%, var(--bg-elev));
  transform: translateY(-1px);
}

/* === iOS APP STORE : masquer tous les CTA paiement === */
/* Apple interdit les paiements externes pour contenu digital.
   Sur iOS wrapper, on cache les boutons Shqip+ qui mènent à Stripe. */
[data-ios-app="true"] .home-premium-cta,
[data-ios-app="true"] .premium-cta-btn,
[data-ios-app="true"] #headerPremiumBtn,
[data-ios-app="true"] .pm-pricing,
[data-ios-app="true"] .pm-price,
[data-ios-app="true"] .pm-period {
  display: none !important;
}

/* Section info iOS dans le premium modal */
.premium-ios-info {
  background: var(--bg-card);
  border-radius: 16px;
  padding: 24px 20px;
  text-align: center;
  margin-top: 16px;
}
.premium-ios-icon {
  font-size: 40px;
  margin-bottom: 12px;
}
.premium-ios-title {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin-bottom: 8px;
}
.premium-ios-body {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.5;
}
.premium-ios-body strong { color: var(--text-primary); font-weight: 700; }

/* === iOS Paywall : hint en haut du modal === */
.premium-ios-hint {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 16px;
  margin: 16px 0 0;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--tint) 12%, var(--bg-card)),
    color-mix(in srgb, var(--tint) 6%, var(--bg-card)));
  border: 1px solid color-mix(in srgb, var(--tint) 30%, transparent);
  border-radius: 14px;
  color: var(--text-primary);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: all 0.18s ease;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 2px 10px color-mix(in srgb, var(--tint) 12%, transparent);
}
.premium-ios-hint:hover { filter: brightness(1.05); transform: translateY(-1px); }
.premium-ios-hint:active { transform: scale(0.98); }
.premium-ios-hint-icon {
  font-size: 24px;
  flex-shrink: 0;
}
.premium-ios-hint-body {
  flex: 1;
  min-width: 0;
}
.premium-ios-hint-title {
  font-size: 14.5px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin-bottom: 2px;
}
.premium-ios-hint-desc {
  font-size: 12.5px;
  color: var(--tint);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.premium-ios-hint-arrow {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: var(--tint);
  animation: premiumIosHintArrow 1.8s ease-in-out infinite;
}
@keyframes premiumIosHintArrow {
  0%, 100% { transform: translateY(0); opacity: 0.7; }
  50%      { transform: translateY(3px); opacity: 1; }
}

/* === iOS Paywall : étapes pour s'abonner depuis web === */
.premium-ios-cta {
  margin-top: 20px;
  padding: 22px 20px;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--tint) 8%, var(--bg-elev)),
    var(--bg-elev));
  border-radius: 18px;
  border: 2px solid color-mix(in srgb, var(--tint) 25%, transparent);
  box-shadow: 0 6px 20px color-mix(in srgb, var(--tint) 10%, transparent);
  scroll-margin-top: 80px;
  transition: box-shadow 0.4s ease, border-color 0.4s ease, transform 0.4s ease;
}
.premium-ios-cta-flash {
  border-color: var(--tint) !important;
  box-shadow: 0 6px 30px color-mix(in srgb, var(--tint) 45%, transparent),
              0 0 0 4px color-mix(in srgb, var(--tint) 18%, transparent) !important;
  transform: scale(1.01);
}
.premium-ios-headline {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border, rgba(120, 120, 128, 0.16));
}
.premium-ios-headline-emoji {
  font-size: 22px;
}
.premium-ios-steps {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.premium-ios-step {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.premium-ios-step-num {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--tint);
  color: #fff;
  font-weight: 800;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: -0.01em;
}
.premium-ios-step-body {
  flex: 1;
  padding-top: 2px;
}
.premium-ios-step-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 2px;
  line-height: 1.35;
}
.premium-ios-step-desc {
  font-size: 12.5px;
  color: var(--text-secondary);
  line-height: 1.4;
}
.premium-ios-domain {
  display: inline-block;
  padding: 1px 8px;
  background: color-mix(in srgb, var(--tint) 12%, transparent);
  border-radius: 6px;
  color: var(--tint);
  font-weight: 800;
  letter-spacing: -0.01em;
  font-size: 13px;
  user-select: all;
  -webkit-user-select: all;
}
.premium-ios-footer {
  margin-top: 18px;
  padding: 12px 14px;
  background: color-mix(in srgb, var(--text-primary) 4%, transparent);
  border-radius: 10px;
  font-size: 12.5px;
  color: var(--text-secondary);
  text-align: center;
  line-height: 1.4;
}
.premium-ios-manage-note {
  padding: 14px 16px;
  background: var(--bg-elev);
  border-radius: 12px;
  font-size: 13px;
  color: var(--text-secondary);
  text-align: center;
  line-height: 1.45;
}

/* === CONFIRM OVERLAY (popup style app) === */
.confirm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  transition: opacity 0.2s ease;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.confirm-overlay.confirm-visible { opacity: 1; }
.confirm-overlay.hidden { display: none; }
.confirm-modal {
  background: var(--bg-card);
  border-radius: 20px;
  padding: 28px 24px 20px;
  max-width: 340px;
  width: 100%;
  text-align: center;
  transform: scale(0.85);
  transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}
.confirm-overlay.confirm-visible .confirm-modal {
  transform: scale(1);
}
.confirm-icon {
  font-size: 48px;
  margin-bottom: 14px;
  line-height: 1;
}
.confirm-title {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin: 0 0 8px;
}
.confirm-body {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.45;
  margin: 0 0 22px;
}
.confirm-actions {
  display: flex;
  gap: 10px;
}
.confirm-btn {
  flex: 1;
  padding: 12px 18px;
  border: 0;
  border-radius: 12px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: -0.01em;
  transition: all 0.15s ease;
}
.confirm-btn-cancel {
  background: var(--bg-elev);
  color: var(--text-primary);
}
.confirm-btn-cancel:hover { background: var(--bg-pressed); }
.confirm-btn-ok {
  background: var(--tint);
  color: #fff;
}
.confirm-btn-ok:hover { filter: brightness(1.05); transform: translateY(-1px); }
.confirm-btn-ok.confirm-btn-danger {
  background: #FF3B30;
}
.confirm-btn:active { transform: scale(0.97); }

/* === ACHIEVEMENT OVERLAY === */
/* ============================================================
   MILESTONE OVERLAY — célébration fullscreen streak 7/30/100/365
   Plus dramatique que l'achievement overlay : background coloré,
   rayons en background, gros chiffre, partage direct vers wrapped.
   ============================================================ */
.milestone-overlay {
  position: fixed;
  inset: 0;
  z-index: 1400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow: hidden;
  animation: milestoneIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.milestone-overlay.hiding { animation: milestoneOut 0.3s ease both; }
@keyframes milestoneIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes milestoneOut { from { opacity: 1; } to { opacity: 0; } }

/* Background : gradient dramatique selon le tone */
.milestone-overlay[data-tone="fire"]    { background: radial-gradient(ellipse at center, #FF6B35 0%, #C2410C 70%, #7C2D12 100%); }
.milestone-overlay[data-tone="diamond"] { background: radial-gradient(ellipse at center, #60A5FA 0%, #2563EB 70%, #1E3A8A 100%); }
.milestone-overlay[data-tone="eagle"]   { background: radial-gradient(ellipse at center, #E11D2A 0%, #991B1B 70%, #450A0A 100%); }
.milestone-overlay[data-tone="crown"]   { background: radial-gradient(ellipse at center, #FBBF24 0%, #B45309 70%, #451A03 100%); }

/* Rayons en background (effet "rayons de soleil") */
.milestone-bg {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  animation: milestoneRotate 60s linear infinite;
}
.milestone-ray {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 1200px;
  background: linear-gradient(to top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0) 100%);
  transform-origin: top center;
  margin-left: -2px;
  margin-top: -600px;
}
@keyframes milestoneRotate { to { transform: rotate(360deg); } }

/* Confettis intenses */
.milestone-confettis {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.milestone-confetti {
  position: absolute;
  top: -20px;
  border-radius: 2px;
  animation: milestoneConfetti linear forwards;
  transform: translateY(0) translateX(0) rotate(0);
}
@keyframes milestoneConfetti {
  to {
    transform: translateY(110vh) translateX(var(--drift)) rotate(var(--rot));
    opacity: 0.6;
  }
}

/* Carte centrale */
.milestone-card {
  position: relative;
  z-index: 2;
  text-align: center;
  color: white;
  max-width: 380px;
  padding: 32px 24px;
  animation: milestoneCardIn 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) both 0.15s;
}
@keyframes milestoneCardIn {
  from { transform: scale(0.7); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}
.milestone-emoji {
  font-size: 92px;
  line-height: 1;
  margin-bottom: 18px;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,0.4));
  animation: milestoneEmojiPulse 1.6s ease-in-out infinite;
}
@keyframes milestoneEmojiPulse {
  0%, 100% { transform: scale(1) rotate(-2deg); }
  50%      { transform: scale(1.08) rotate(2deg); }
}
.milestone-streak-badge {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 10px 22px;
  background: rgba(255,255,255,0.18);
  border: 2px solid rgba(255,255,255,0.35);
  border-radius: 999px;
  margin-bottom: 20px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.milestone-streak-num {
  font-size: 32px;
  font-weight: 900;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.milestone-streak-lbl {
  font-size: 15px;
  font-weight: 700;
  opacity: 0.85;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.milestone-title {
  font-size: 38px;
  font-weight: 900;
  letter-spacing: -0.025em;
  margin-bottom: 12px;
  text-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.milestone-sub {
  font-size: 17px;
  font-weight: 600;
  opacity: 0.9;
  line-height: 1.4;
  margin-bottom: 32px;
  text-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
.milestone-share-btn,
.milestone-close-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px 22px;
  border-radius: 14px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.16s ease, background 0.2s ease;
  margin-bottom: 10px;
}
.milestone-share-btn {
  background: rgba(255,255,255,0.95);
  color: #111827;
  border: none;
}
.milestone-share-btn:hover  { transform: scale(1.02); }
.milestone-share-btn:active { transform: scale(0.97); }
.milestone-share-btn svg    { width: 18px; height: 18px; }
.milestone-close-btn {
  background: transparent;
  color: rgba(255,255,255,0.9);
  border: 1.5px solid rgba(255,255,255,0.4);
}
.milestone-close-btn:hover  { background: rgba(255,255,255,0.1); }
.milestone-close-btn:active { transform: scale(0.97); }

@media (prefers-reduced-motion: reduce) {
  .milestone-bg { animation: none; }
  .milestone-emoji { animation: none; }
  .milestone-card { animation: milestoneIn 0.3s ease both; }
}

.achievement-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 1300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  transition: opacity 0.28s ease;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.achievement-overlay.ach-visible { opacity: 1; }
.ach-card {
  background: var(--bg-card);
  border-radius: 24px;
  padding: 32px 28px 24px;
  max-width: 360px;
  width: 100%;
  text-align: center;
  position: relative;
  transform: scale(0.7) translateY(20px);
  transition: transform 0.42s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  overflow: visible;
}
.achievement-overlay.ach-visible .ach-card {
  transform: scale(1) translateY(0);
}
.ach-confettis {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  pointer-events: none;
}
.ach-confetti {
  position: absolute;
  width: 10px;
  height: 14px;
  border-radius: 2px;
  opacity: 0;
  animation: achConfetti 1.4s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
@keyframes achConfetti {
  0%   { opacity: 0; transform: translate(0,0) rotate(0); }
  15%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--tx), var(--ty)) rotate(var(--rot)); }
}
.ach-icon {
  font-size: 72px;
  margin-bottom: 12px;
  line-height: 1;
  animation: achIconBounce 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
  filter: drop-shadow(0 6px 16px rgba(0,0,0,0.15));
}
@keyframes achIconBounce {
  0%   { transform: scale(0) rotate(-180deg); opacity: 0; }
  60%  { transform: scale(1.2) rotate(0deg); opacity: 1; }
  80%  { transform: scale(0.92) rotate(0deg); }
  100% { transform: scale(1) rotate(0deg); }
}
.ach-eyebrow {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tint);
  margin-bottom: 6px;
}
.ach-name {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin-bottom: 8px;
  line-height: 1.1;
}
.ach-desc {
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 22px;
  line-height: 1.4;
}
.ach-cta {
  background: var(--tint);
  color: #fff;
  border: 0;
  border-radius: 14px;
  padding: 13px 28px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: -0.01em;
  transition: all 0.15s ease;
  width: 100%;
}
.ach-cta:hover { filter: brightness(1.05); transform: translateY(-1px); }
.ach-cta:active { transform: scale(0.98); }

/* === COMBO BADGE === */
.combo-badge {
  position: fixed;
  /* En bas centré, au-dessus de la tab bar et des toasts */
  bottom: calc(env(safe-area-inset-bottom, 0px) + 96px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: linear-gradient(135deg, #FFB800, #FF8800);
  color: #fff;
  font-weight: 800;
  letter-spacing: -0.01em;
  border-radius: 99px;
  box-shadow: 0 4px 16px rgba(255, 136, 0, 0.4);
  font-size: 14px;
  animation: comboAppear 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  transition: background 0.3s ease, box-shadow 0.3s ease;
  pointer-events: none;
  white-space: nowrap;
}
@media (min-width: 880px) {
  .combo-badge {
    /* Sur desktop pas de tab bar, plus près du bas */
    bottom: 32px;
  }
}
.combo-badge.hidden { display: none; }
.combo-badge .combo-flame {
  font-size: 16px;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.25));
}
.combo-badge .combo-count {
  font-size: 16px;
  font-weight: 900;
}
.combo-badge .combo-multiplier {
  background: rgba(255,255,255,0.25);
  padding: 2px 8px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  margin-left: 2px;
}
.combo-badge.combo-hot {
  background: linear-gradient(135deg, #FF8800, #FF4500);
  box-shadow: 0 4px 18px rgba(255, 69, 0, 0.5);
}
.combo-badge.combo-fire {
  background: linear-gradient(135deg, #FF4500, #DC143C);
  box-shadow: 0 4px 20px rgba(220, 20, 60, 0.55);
  animation: comboFirePulse 1.2s ease-in-out infinite;
}
.combo-badge.combo-milestone {
  animation: comboMilestone 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.combo-badge.combo-broken {
  background: linear-gradient(135deg, #8e8e93, #6e6e72) !important;
  box-shadow: none !important;
  filter: grayscale(0.6);
  animation: comboBroken 0.6s ease-out forwards;
}
@keyframes comboAppear {
  0%   { opacity: 0; transform: translate(-50%, 20px) scale(0.6); }
  100% { opacity: 1; transform: translate(-50%, 0) scale(1); }
}
@keyframes comboFirePulse {
  0%, 100% { box-shadow: 0 4px 20px rgba(220, 20, 60, 0.55); }
  50%      { box-shadow: 0 4px 30px rgba(220, 20, 60, 0.9); }
}
@keyframes comboMilestone {
  0%   { transform: translateX(-50%) scale(1); }
  30%  { transform: translateX(-50%) scale(1.3) rotate(-4deg); }
  60%  { transform: translateX(-50%) scale(1.15) rotate(4deg); }
  100% { transform: translateX(-50%) scale(1) rotate(0deg); }
}
@keyframes comboBroken {
  0%   { transform: translateX(-50%) translateY(0); opacity: 1; }
  20%  { transform: translateX(-50%) translateY(-4px) rotate(-2deg); opacity: 0.9; }
  40%  { transform: translateX(-50%) translateY(2px) rotate(2deg); opacity: 0.7; }
  60%  { transform: translateX(-50%) translateY(-2px); opacity: 0.5; }
  100% { transform: translateX(-50%) translateY(8px); opacity: 0; }
}

/* +XP floating badge */
.xp-burst {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--green);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.02em;
  padding: 5px 14px;
  border-radius: 99px;
  pointer-events: none;
  z-index: 5;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--green) 40%, transparent);
  white-space: nowrap;
  animation: xpBurst 1.2s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

/* Animations */
@keyframes optCorrectPulse {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.025); }
  100% { transform: scale(1); }
}
@keyframes optCheckPop {
  0%   { transform: scale(0) rotate(-90deg); opacity: 0; }
  60%  { transform: scale(1.2) rotate(0deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
@keyframes optShake {
  0%, 100% { transform: translateX(0); }
  15%      { transform: translateX(-8px); }
  30%      { transform: translateX(8px); }
  45%      { transform: translateX(-6px); }
  60%      { transform: translateX(6px); }
  75%      { transform: translateX(-3px); }
  90%      { transform: translateX(3px); }
}
@keyframes xpBurst {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
  20%  { opacity: 1; transform: translate(-50%, calc(-50% - 14px)) scale(1.15); }
  35%  { opacity: 1; transform: translate(-50%, calc(-50% - 18px)) scale(1); }
  100% { opacity: 0; transform: translate(-50%, calc(-50% - 80px)) scale(0.9); }
}

/* Card transition (slide-in / slide-out) */
.ex-card-anim-in {
  animation: cardSlideIn 0.4s cubic-bezier(0.34, 1.4, 0.5, 1) backwards;
}
.ex-card-anim-out {
  animation: cardSlideOut 0.28s cubic-bezier(0.36, 0, 0.66, -0.56) forwards;
}
@keyframes cardSlideIn {
  0%   { opacity: 0; transform: translateX(40px); }
  100% { opacity: 1; transform: translateX(0); }
}
@keyframes cardSlideOut {
  0%   { opacity: 1; transform: translateX(0); }
  100% { opacity: 0; transform: translateX(-40px); }
}

/* Le prompt big qui pop quand la card arrive */
.ex-card-anim-in .ex-prompt-big {
  animation: promptPop 0.4s 0.1s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}
@keyframes promptPop {
  0%   { opacity: 0; transform: scale(0.85); }
  60%  { opacity: 1; transform: scale(1.04); }
  100% { opacity: 1; transform: scale(1); }
}

/* === Animations spécifiques aux tiles BUILD === */
.build-tile.correct {
  animation: buildTileCorrect 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--green) 35%, transparent),
              0 4px 14px color-mix(in srgb, var(--green) 20%, transparent);
}
.build-tile.wrong {
  animation: optShake 0.45s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}
.build-tile-pop {
  animation: buildTileCorrect 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both !important;
}
@keyframes buildTileCorrect {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}
.build-shake {
  animation: optShake 0.45s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

/* === Animations MATCH (paires) === */
.match-tile.match-pop {
  animation: matchPop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes matchPop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}
.match-tile.match-shake {
  animation: optShake 0.45s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

/* === Animations TYPE (input) === */
.type-input.correct {
  animation: typeInputCorrect 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 18%, transparent),
              0 4px 16px color-mix(in srgb, var(--green) 20%, transparent);
}
.type-input.wrong {
  animation: optShake 0.45s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}
@keyframes typeInputCorrect {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.015); }
  100% { transform: scale(1); }
}

/* [v176] HINT button + zone (quiz type input) */
.online-btn.online-btn-ghost {
  background: transparent;
  color: var(--text-secondary);
  border: 1.5px dashed color-mix(in srgb, var(--text-secondary) 35%, transparent);
}
.online-btn.online-btn-ghost:hover:not(:disabled) {
  border-color: var(--tint);
  color: var(--tint);
  background: color-mix(in srgb, var(--tint) 6%, transparent);
}
.online-btn.online-btn-ghost:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.quiz-hint-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.quiz-hint-emoji { font-size: 16px; line-height: 1; }
.quiz-hint-zone {
  min-height: 0;
  margin: 8px 0 4px;
}
.quiz-hint-zone:empty { display: none; }
.quiz-hint-loading,
.quiz-hint-error,
.quiz-hint-none {
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 13px;
  color: var(--text-secondary);
  background: var(--bg-elev);
  display: flex;
  align-items: center;
  gap: 8px;
  animation: hintFadeIn 0.25s ease;
}
.quiz-hint-error { color: var(--tint); background: color-mix(in srgb, var(--tint) 6%, var(--bg-elev)); }
.quiz-hint-bubble {
  background: linear-gradient(135deg, color-mix(in srgb, #FFD60A 10%, var(--bg-card)) 0%, color-mix(in srgb, #FF9500 8%, var(--bg-card)) 100%);
  border: 1px solid color-mix(in srgb, #FF9500 20%, transparent);
  border-radius: 14px;
  padding: 12px 14px;
  animation: hintFadeIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.quiz-hint-author {
  font-size: 11px;
  font-weight: 800;
  color: color-mix(in srgb, #FF9500 80%, var(--text-primary));
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.quiz-hint-text {
  font-size: 14px;
  color: var(--text-primary);
  line-height: 1.45;
}
@keyframes hintFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* === Fill-revealed (le mot révélé dans la phrase à trous) === */
.fill-revealed {
  animation: fillRevealPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes fillRevealPop {
  0%   { transform: scale(0.7); opacity: 0; }
  60%  { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

.quiz-score {
  text-align: center;
  margin-top: 20px;
  font-size: 14px;
  color: var(--label-2);
  font-variant-numeric: tabular-nums;
}

/* ============ DAILY ============ */
.daily-card {
  background: var(--bg-card);
  border-radius: 18px;
  padding: 56px 24px;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: var(--card-shadow);
}
.daily-card::before {
  content: '';
  position: absolute;
  top: -40px; right: -40px;
  width: 160px; height: 160px;
  background: radial-gradient(circle, var(--orange-glow), transparent 70%);
  pointer-events: none;
}
.daily-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--orange);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 28px;
}
.daily-word {
  font-size: clamp(48px, 13vw, 72px);
  font-weight: 700;
  letter-spacing: -1.6px;
  color: var(--label);
  line-height: 1;
  margin-bottom: 16px;
}
.daily-phon { font-size: 15px; color: var(--label-2); font-style: italic; margin-bottom: 24px; }
.daily-trans {
  font-size: clamp(22px, 6vw, 28px);
  font-weight: 600;
  color: var(--tint);
  letter-spacing: -0.5px;
  margin-bottom: 24px;
  line-height: 1.15;
}

/* ============ VERBS ============ */
.verb-card {
  background: var(--bg-card);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--card-shadow);
}
.verb-head {
  padding: 20px 20px 16px;
  border-bottom: 0.5px solid var(--separator);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.verb-inf {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -1px;
  color: var(--label);
}
.verb-meaning { font-size: 14px; color: var(--label-2); font-style: italic; }
.conj-row {
  display: grid;
  grid-template-columns: 70px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 20px;
  border-bottom: 0.5px solid var(--separator);
}
.conj-row:last-child { border-bottom: none; }
.conj-row:active { background: var(--bg-pressed); }
.conj-pronoun { font-size: 14px; color: var(--label-2); font-weight: 500; letter-spacing: -0.24px; }
.conj-form { font-size: 19px; font-weight: 600; color: var(--label); letter-spacing: -0.4px; }
.conj-form-meaning {
  display: block;
  font-size: 13px;
  font-weight: 400;
  color: var(--label-2);
  font-style: italic;
  margin-top: 1px;
  letter-spacing: -0.08px;
}
.conj-audio { width: 32px; height: 32px; }
.conj-audio svg { width: 14px; height: 14px; }

/* ============ CONVERSATIONS ============ */
.conv-head { padding: 0 4px; margin-bottom: 16px; }
.conv-title-text {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--label);
  margin-bottom: 4px;
}
.conv-context { font-size: 14px; color: var(--label-2); font-style: italic; }

.conv-line {
  background: var(--bg-card);
  border-radius: 18px;
  padding: 16px 18px;
  margin-bottom: 8px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: flex-start;
  box-shadow: var(--card-shadow);
}
.conv-line.me { background: var(--tint-soft); box-shadow: none; }

.conv-speaker {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  color: var(--label-2);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}
.conv-line.me .conv-speaker { color: var(--tint); }
.conv-text-sq {
  font-size: 18px;
  font-weight: 600;
  color: var(--label);
  margin-bottom: 4px;
  letter-spacing: -0.4px;
  line-height: 1.3;
}
.conv-text-fr {
  font-size: 14px;
  color: var(--label-2);
  font-style: italic;
  margin-bottom: 4px;
  line-height: 1.35;
}
.conv-text-phon { font-size: 12px; color: var(--label-3); letter-spacing: -0.08px; }

/* ============ STATS ============ */
.stats {
  background: var(--bg-card);
  border-radius: 18px;
  margin-top: 20px;
  overflow: hidden;
  box-shadow: var(--card-shadow);
}
.stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px;
  border-bottom: 0.5px solid var(--separator);
}
.stat-row:last-child { border-bottom: none; }
.stat-lbl { font-size: 17px; color: var(--label); letter-spacing: -0.4px; }
.stat-val { font-size: 17px; font-weight: 600; color: var(--label-2); font-variant-numeric: tabular-nums; letter-spacing: -0.4px; }
.stat-val.accent { color: var(--tint); }

.foot-note {
  margin-top: 24px;
  text-align: center;
  font-size: 12px;
  color: var(--label-3);
  padding: 0 20px;
}
.foot-note .heart { color: var(--tint); }
.tts-warn {
  margin-top: 8px;
  text-align: center;
  font-size: 11px;
  color: var(--orange);
  padding: 0 20px;
}

/* ============ TAB BAR ============ */
.tab-bar {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 540px;
  background: var(--tab-bg);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-top: 0.5px solid var(--separator);
  display: flex;
  padding: 4px 0 calc(4px + env(safe-area-inset-bottom));
  z-index: 100;
}
.tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 4px 2px;
  color: var(--tab-inactive);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: -0.08px;
  transition: color 0.1s, transform 0.08s;
}
.tab-item:active { transform: scale(0.92); }
.tab-item.active { color: var(--tint); }
.tab-item svg { width: 22px; height: 22px; }
.tab-item { position: relative; }
.tab-dot {
  position: absolute;
  top: 4px;
  right: calc(50% - 18px);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 2px var(--bg-page), 0 0 8px color-mix(in srgb, var(--green) 60%, transparent);
  animation: tabDotPulse 1.6s ease-in-out infinite;
}
@keyframes tabDotPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.75; transform: scale(1.15); }
}

.hidden { display: none !important; }

/* ====================================================================
   DESKTOP / WIDE LAYOUT (≥ 880px)
   Sidebar gauche style macOS/iPad + content area scrollable indépendamment
   ==================================================================== */
.brand-sidebar-slot { display: none; }
@media (min-width: 880px) {
  body { overflow: hidden; }

  /* ====================================================================
     LAYOUT DESKTOP : header top + sidebar 180px + content + aside 280px
     Style "dense" : alignement à gauche, pas de centrage qui crée du vide.
     ==================================================================== */
  .shell {
    max-width: none;
    width: 100vw;
    margin: 0;
    height: 100dvh;
    min-height: 100dvh;
    padding: 0;
    padding-bottom: 0;
    overflow: hidden;
    display: grid;
    grid-template-columns: 180px 1fr;
    grid-template-rows: 56px 1fr;
    grid-template-areas:
      "brand   header"
      "nav     content";
  }

  /* ---- Header top : barre globale en haut ---- */
  .nav-bar {
    grid-area: header;
    position: static;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    padding: 0 20px;
    height: 56px;
    background: var(--bg-card);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 0.5px solid var(--separator);
  }
  .nav-bar .brand-wrapper { display: none; }
  .nav-actions { gap: 6px; }

  /* ---- Slot logo (zone haut-gauche, au-dessus de la sidebar) ---- */
  .brand-sidebar-slot {
    grid-area: brand;
    display: flex;
    align-items: center;
    padding: 0 16px;
    height: 56px;
    background: var(--bg-card);
    border-right: 0.5px solid var(--separator);
    border-bottom: 0.5px solid var(--separator);
  }
  .brand-sidebar-slot img { height: 26px; width: auto; }
  .brand-sidebar-slot .brand-logo-light { display: block; }
  .brand-sidebar-slot .brand-logo-dark { display: none; }
  [data-theme="dark"] .brand-sidebar-slot .brand-logo-light { display: none; }
  [data-theme="dark"] .brand-sidebar-slot .brand-logo-dark { display: block; }

  /* ---- Sidebar nav ---- */
  .tab-bar {
    grid-area: nav;
    position: static;
    left: auto;
    width: auto;
    max-width: none;
    transform: none;
    height: auto;
    flex-direction: column;
    align-items: stretch;
    padding: 12px 10px 24px;
    border-top: none;
    border-right: 0.5px solid var(--separator);
    background: var(--bg-card);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    gap: 2px;
    overflow-y: auto;
  }
  .tab-item {
    flex: 0 0 auto;
    flex-direction: row;
    justify-content: flex-start;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--label);
    transition: background-color 0.15s ease, color 0.15s ease, transform 0.08s;
  }
  .tab-item svg { width: 18px; height: 18px; flex-shrink: 0; }
  .tab-item span { white-space: nowrap; }
  .tab-item:active { transform: scale(0.98); }
  .tab-item.active { background: var(--tint-soft); color: var(--tint); }
  .tab-item .tab-dot {
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    left: auto;
  }

  /* ---- Content area : full largeur, padding raisonnable ---- */
  .content {
    grid-area: content;
    background: var(--bg-page);
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding: 0;
  }
  .view {
    max-width: none;
    margin: 0;
    padding: 24px 32px 64px;
  }

  /* ====================================================================
     VUE MOTS : sections denses, content + aside (280px via .study-grid)
     ==================================================================== */
  #view-study {
    max-width: none;
    padding: 20px 32px 48px;
  }
  #view-study > .cat-groups-row { margin-bottom: 12px; }
  #view-study > .cat-scroller { margin-bottom: 12px; }
  #view-study > .info-banner { margin-bottom: 12px; }
  #view-study > .mode-pills {
    margin: 0 0 16px;
    max-width: 360px;
  }

  /* La grid 2 colonnes : content card + aside stats */
  .study-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 28px;
    align-items: start;
    margin-bottom: 24px;
  }
  .study-main {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
    max-width: none;
  }
  .study-side {
    position: sticky;
    top: 0;
    align-self: start;
  }
  .study-side .stats { margin-top: 0; }

  /* Categories chips : scroll horizontal sur desktop aussi, plus élégant qu'un wrap */
  .cat-scroller {
    top: 0;
    padding: 10px 12px;
    gap: 6px;
  }
  .cat-groups-row { margin-bottom: 0; }

  /* Info banner */
  .info-banner {
    padding: 10px 14px;
  }

  /* Mode pills compactes */
  .mode-pills {
    max-width: 360px;
  }

  /* ====================================================================
     VUE QUIZ : pareil — sections denses + aside 280px
     ==================================================================== */
  #view-quiz {
    max-width: none;
    padding: 20px 32px 48px;
  }
  .practice-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 24px;
    align-items: start;
  }
  .practice-main {
    min-width: 0;
    max-width: none;
  }
  .practice-side {
    position: sticky;
    top: 0;
    align-self: start;
  }

  /* ====================================================================
     VUE AUJOURD'HUI : 2 colonnes en desktop, full width mobile
     ==================================================================== */
  #view-daily {
    max-width: none;
    margin: 0;
    padding: 24px 32px 48px;
  }
  /* Wrapper 2 colonnes */
  #view-daily .daily-cols {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px 28px;
    align-items: start;
    margin-bottom: 24px;
  }
  #view-daily .daily-col-left,
  #view-daily .daily-col-right {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
  }
  /* Aligner verticalement : la colonne droite démarre alignée avec
     les missions (pas avec le title de gauche). Padding-top égal à la
     hauteur du section title (~26px) + son margin-bottom (~12px = gap) */
  #view-daily .daily-col-right {
    padding-top: 38px;
  }
  /* Hauteur minimale égale entre les 6 cards (3 missions + 3 CTAs) pour que
     les rows de gauche s'alignent visuellement avec les rows de droite.
     Les margin-top des CTAs sont neutralisés ici, le gap de la colonne suffit
     pour les espacer. Effet appliqué SEULEMENT en desktop : sur mobile chaque
     card garde sa hauteur naturelle et ses margin-top originaux. */
  #view-daily .mission-card,
  #view-daily .progress-cta,
  #view-daily .challenge-cta,
  #view-daily .home-premium-cta {
    min-height: 76px;
  }
  #view-daily .progress-cta,
  #view-daily .challenge-cta,
  #view-daily .home-premium-cta {
    margin-top: 0;
  }

  /* ====================================================================
     VUES VERBES / DISCUTER : layout normal mais bien rempli
     ==================================================================== */
  #view-verbs, #view-conv {
    max-width: none;
    margin: 0;
    padding: 24px 32px 48px;
  }

  /* ---- Card mot : fluide, largeur naturelle (pas trop large non plus) ---- */
  .card { min-height: 400px; }
  .card-face { padding: 48px 40px; }
  .card-cat { top: 16px; left: 20px; font-size: 12px; }
  .card-audio { top: 14px; right: 14px; }
  .word { font-size: clamp(44px, 4vw, 64px); }
  .translation { font-size: clamp(28px, 2.8vw, 40px); }

  /* Quiz card 2 colonnes options */
  .quiz-card { padding: 36px 32px; }
  .quiz-options { grid-template-columns: 1fr 1fr; }

  /* Daily card */
  .daily-card { padding: 48px 32px; }

  /* Verb / Conv */
  .verb-head { padding: 20px 24px 16px; }
  .conj-row { padding: 12px 24px; }
  .conv-line { padding: 14px 18px; }

  /* Stats sidebar plus compactes */
  .stats { padding: 14px 16px; }
  .stat-row { padding: 8px 0; }
  .stat-lbl { font-size: 12px; }
  .stat-val { font-size: 14px; }

  /* Focus visible */
  button:focus { outline: none; }
  button:focus-visible { outline: 2px solid var(--tint); outline-offset: 2px; }
  .tab-item:focus-visible { outline: 2px solid var(--tint); outline-offset: -2px; }
}

/* ---- Hover states (souris uniquement) ---- */
@media (hover: hover) and (min-width: 880px) {
  .tab-item:hover:not(.active) { background: var(--bg-pressed); }
  .cat-chip:not(.active) { cursor: pointer; }
  .cat-chip:hover:not(.active) { background: var(--bg-pressed); }
  .conj-row:hover { background: var(--bg-pressed); cursor: default; }
  .opt:hover:not(:disabled):not(.correct):not(.wrong) { background: var(--bg-pressed); }
  .audio-btn:hover { background: var(--bg-pressed); cursor: pointer; }
  .audio-btn.playing:hover { background: var(--tint); }
  .action:hover { filter: brightness(0.97); cursor: pointer; }
  .nav-btn:hover:not(:disabled) { opacity: 0.7; }
  .theme-toggle:hover { cursor: pointer; }
  .theme-toggle:hover { background: var(--bg-pressed); }
  .card { cursor: pointer; }
}

/* ============ MODE PILLS (Toutes / À réviser, SQ↔FR) ============ */
.mode-pills {
  display: flex;
  gap: 6px;
  background: var(--bg-card);
  border-radius: 14px;
  padding: 4px;
  margin: 0 0 14px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.mode-pill {
  flex: 1;
  background: transparent;
  border: 0;
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 600;
  padding: 9px 12px;
  border-radius: 11px;
  transition: all 0.18s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  font-family: inherit;
}
.mode-pill.active {
  background: var(--bg-page);
  color: var(--text-primary);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
[data-theme="dark"] .mode-pill.active { background: var(--bg-elev); }
.mode-pill-count {
  background: var(--tint);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 99px;
  min-width: 18px;
  text-align: center;
}
.mode-pill:not(.active) .mode-pill-count { background: var(--bg-elev); color: var(--text-secondary); }

/* ============ CARD HERO (emoji) ============ */
.card-hero {
  font-size: 56px;
  line-height: 1;
  margin: 0 0 14px;
  text-align: center;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.08));
}
@media (max-width: 480px) {
  .card-hero { font-size: 48px; }
}

/* ============ EMPTY STATE (rien à réviser) ============ */
.empty-state {
  background: var(--bg-card);
  border-radius: 18px;
  padding: 44px 24px;
  text-align: center;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.empty-emoji {
  font-size: 64px;
  line-height: 1;
  margin-bottom: 16px;
  animation: emptyFloat 3s ease-in-out infinite;
}
@keyframes emptyFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
.empty-title { font-size: 22px; font-weight: 700; margin-bottom: 8px; color: var(--text-primary); }
.empty-text { font-size: 15px; color: var(--text-secondary); line-height: 1.5; max-width: 360px; margin: 0 auto; }
.empty-text strong { color: var(--text-primary); font-weight: 600; }
.empty-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  background: var(--tint);
  color: #fff;
  border: 0;
  border-radius: 99px;
  padding: 10px 20px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.18s ease;
}
.empty-cta:hover { filter: brightness(1.06); transform: translateY(-1px); }
.empty-cta svg { width: 14px; height: 14px; }

/* Variante compacte (pour modales, sidebars) */
.empty-state.empty-state-compact {
  padding: 28px 20px;
}
.empty-state.empty-state-compact .empty-emoji { font-size: 44px; margin-bottom: 10px; }
.empty-state.empty-state-compact .empty-title { font-size: 16px; }
.empty-state.empty-state-compact .empty-text { font-size: 13px; }

/* ============ CALENDAR (streak) ============ */
.calendar-card {
  background: var(--bg-card);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  margin-top: 14px;
}
.calendar-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 12px;
}
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.cal-cell {
  aspect-ratio: 1;
  border-radius: 4px;
  background: var(--bg-elev);
  transition: transform 0.15s ease;
}
.cal-cell.active { background: var(--tint); }
.cal-cell.today { box-shadow: 0 0 0 2px var(--text-primary); }
@media (hover: hover) {
  .cal-cell:hover { transform: scale(1.15); cursor: default; }
}

/* ============ RECAP HEBDO ============ */
.recap-card {
  background: var(--bg-card);
  border-radius: 18px;
  padding: 20px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  margin-top: 14px;
}
/* Spacing entre le bloc CTAs (qui se termine par home-premium-cta) et la
   daily-card "Phrase du jour" : depuis qu'on a retiré le titre de section
   "Phrase du jour", il fallait restaurer ~20px de respiration ici. */
#view-daily > .daily-card {
  margin-top: 20px;
}
.recap-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 14px;
}
.recap-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}
.recap-stat {
  background: var(--bg-elev);
  border-radius: 12px;
  padding: 12px 8px;
  text-align: center;
}
.recap-num { font-size: 24px; font-weight: 700; color: var(--tint); line-height: 1; margin-bottom: 4px; }
.recap-lbl { font-size: 11px; color: var(--text-secondary); font-weight: 500; }
.recap-section { display: flex; flex-direction: column; gap: 8px; }
.recap-section-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 4px 0 4px;
}
.recap-word {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--bg-elev);
  border: 0;
  border-radius: 12px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  width: 100%;
  transition: background 0.15s ease;
}
.recap-word:hover { background: var(--bg-pressed); }
.recap-word-img { font-size: 22px; line-height: 1; flex-shrink: 0; }
.recap-word-sq { font-size: 15px; font-weight: 600; color: var(--text-primary); flex: 1; }
.recap-word-fr { font-size: 13px; color: var(--text-secondary); }
.recap-empty {
  background: var(--bg-elev);
  border-radius: 12px;
  padding: 16px;
  text-align: center;
  font-size: 14px;
  color: var(--text-secondary);
}

/* ============ SITUATIONS (enriched) ============ */
.sit-block {
  background: var(--bg-elev);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 12px;
}
.sit-block-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 10px;
}
.sit-vocab-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.sit-vocab-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-primary);
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s ease;
}
.sit-vocab-chip:hover { background: var(--bg-pressed); transform: translateY(-1px); }
.sit-vocab-img { font-size: 16px; line-height: 1; }
.sit-vocab-sq { color: var(--text-primary); }
.sit-vocab-fr { color: var(--text-secondary); font-weight: 400; font-size: 12px; }

.sit-tip {
  display: flex;
  gap: 12px;
  background: color-mix(in srgb, var(--tint) 8%, var(--bg-card));
  border-left: 3px solid var(--tint);
}
[data-theme="dark"] .sit-tip { background: color-mix(in srgb, var(--tint) 14%, var(--bg-elev)); }
.sit-tip-icon {
  color: var(--tint);
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-top: 1px;
}
.sit-tip-icon svg { width: 100%; height: 100%; }
.sit-tip-body { flex: 1; }
.sit-tip-text { font-size: 14px; line-height: 1.5; color: var(--text-primary); }

.sit-dialogue-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 18px 0 10px;
}
.sit-lines { display: flex; flex-direction: column; gap: 10px; }

/* ============ SEARCH MODAL ============ */
.search-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 1000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: chatSlideUp 0.22s ease;
}
.search-overlay.hidden { display: none; }
.search-modal {
  background: var(--bg-page);
  border-radius: 24px 24px 0 0;
  width: 100%;
  max-width: 560px;
  height: 86vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 -10px 40px rgba(0,0,0,0.2);
  position: relative;
}
@media (min-width: 700px) {
  .search-overlay { align-items: center; padding: 24px; }
  .search-modal { border-radius: 24px; height: 80vh; max-height: 720px; }
}
.search-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}
.search-input-wrap {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
}
.search-input-icon {
  position: absolute;
  left: 12px;
  width: 18px;
  height: 18px;
  color: var(--text-secondary);
  pointer-events: none;
}
#searchInput {
  width: 100%;
  background: var(--bg-elev);
  border: 0;
  border-radius: 10px;
  padding: 10px 14px 10px 38px;
  font-size: 16px;
  color: var(--text-primary);
  font-family: inherit;
  outline: none;
}
#searchInput::placeholder { color: var(--text-secondary); }

/* Filtres rapides search : chips horizontaux scrollables, sous la search bar */
.search-filters {
  display: flex;
  gap: 6px;
  padding: 10px 14px;
  overflow-x: auto;
  border-bottom: 1px solid var(--border);
  scrollbar-width: none;
}
.search-filters::-webkit-scrollbar { display: none; }
.search-filter-chip {
  flex-shrink: 0;
  padding: 6px 12px;
  background: var(--bg-elev);
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease, transform 0.12s ease;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.search-filter-chip:hover { background: var(--bg-card); }
.search-filter-chip:active { transform: scale(0.96); }
.search-filter-chip.active {
  background: var(--tint);
  color: white;
  box-shadow: 0 1px 3px color-mix(in srgb, var(--tint) 35%, transparent);
}
.search-close-btn {
  background: transparent;
  border: 0;
  color: var(--tint);
  font-size: 15px;
  font-weight: 600;
  padding: 8px 4px;
  cursor: pointer;
  font-family: inherit;
}
.search-results {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 6px;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.search-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  background: transparent;
  border: 0;
  border-radius: 10px;
  padding: 10px 12px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: background 0.12s ease;
}
.search-row:hover, .search-row:focus { background: var(--bg-elev); outline: none; }
.search-row-img { font-size: 22px; line-height: 1; flex-shrink: 0; width: 28px; text-align: center; }
.search-row-main { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.search-row-sq { font-size: 15px; font-weight: 600; color: var(--text-primary); }
.search-row-fr { font-size: 13px; color: var(--text-secondary); }
.search-row-cat {
  font-size: 11px;
  color: var(--text-secondary);
  background: var(--bg-elev);
  padding: 3px 8px;
  border-radius: 6px;
  font-weight: 500;
  flex-shrink: 0;
}
.search-row:hover .search-row-cat { background: var(--bg-card); }
.search-empty {
  padding: 32px 16px;
  text-align: center;
  color: var(--text-secondary);
  font-size: 14px;
}

/* ============ TOAST ============ */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--tab-bar-h, 80px) + 16px);
  transform: translateX(-50%) translateY(20px);
  background: var(--text-primary);
  color: var(--bg-page);
  padding: 12px 8px 12px 18px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  z-index: 2000;
  max-width: calc(100vw - 32px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.toast.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.toast-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.toast-undo {
  background: transparent;
  color: var(--tint);
  border: 0;
  font-size: 14px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  flex-shrink: 0;
}
[data-theme="dark"] .toast-undo { color: #FF6B61; }
.toast-undo:hover { background: rgba(255, 255, 255, 0.08); }
@media (min-width: 880px) {
  .toast { bottom: 24px; left: calc(280px + 50%); transform: translateX(calc(-50% - 140px)) translateY(20px); }
  .toast.visible { transform: translateX(calc(-50% - 140px)) translateY(0); }
}

/* ============ MNÉMONIQUES ============ */

/* Bouton trigger sous les actions Je sais / À revoir */
.mnemo-trigger {
  background: color-mix(in srgb, var(--tint) 8%, var(--bg-card));
  border: 1px solid color-mix(in srgb, var(--tint) 20%, transparent);
  color: var(--tint);
  border-radius: 12px;
  padding: 11px 14px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  width: 100%;
  transition: all 0.15s ease;
}
.mnemo-trigger:hover {
  background: color-mix(in srgb, var(--tint) 14%, var(--bg-card));
  transform: translateY(-1px);
}
.mnemo-trigger-icon { font-size: 16px; line-height: 1; }
.mnemo-trigger-label { color: inherit; }
.mnemo-trigger-tag {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: var(--tint);
  color: #fff;
  padding: 2px 7px;
  border-radius: 99px;
  margin-left: auto;
}
[data-theme="dark"] .mnemo-trigger {
  background: color-mix(in srgb, var(--tint) 14%, var(--bg-card));
}

/* Modal mnémoniques (réutilise pattern search modal) */
.mnemonics-modal { max-width: 540px; }
.mnemo-head {
  flex-direction: column;
  align-items: stretch !important;
  gap: 8px;
  padding-bottom: 14px;
}
.mnemo-head .search-close-btn {
  align-self: flex-end;
  margin-top: -4px;
}
.mnemo-title-wrap { display: flex; flex-direction: column; gap: 4px; }
.mnemo-title-prefix {
  display: flex;
  align-items: center;
  gap: 6px;
}
.mnemo-title-emoji { font-size: 16px; line-height: 1; }
.mnemo-title-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.mnemo-word-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.mnemo-word-sq {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  word-break: break-word;
}
.mnemo-word-sep { color: var(--text-secondary); }
.mnemo-word-fr {
  font-size: 15px;
  color: var(--text-secondary);
  font-weight: 500;
}

.mnemonics-body {
  padding: 16px 16px 20px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  max-height: calc(100vh - 240px);
}

.mnemo-loading {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 30px 16px;
  color: var(--text-secondary);
  font-size: 14px;
  justify-content: center;
}

.mnemo-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 24px 16px;
  text-align: center;
}
.mnemo-error-icon { font-size: 32px; }
.mnemo-error-text { color: var(--text-primary); font-size: 14px; }

.mnemo-cache-notice {
  font-size: 11.5px;
  color: var(--text-secondary);
  text-align: center;
  margin-bottom: 12px;
  font-style: italic;
  opacity: 0.8;
}

.mnemo-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mnemo-card {
  display: flex;
  gap: 12px;
  background: var(--bg-elev);
  border-radius: 14px;
  padding: 14px 16px;
  align-items: flex-start;
}
.mnemo-num {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--tint);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.mnemo-text {
  flex: 1;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--text-primary);
}
.mnemo-emph {
  background: color-mix(in srgb, var(--tint) 18%, transparent);
  color: var(--tint);
  font-style: normal;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 6px;
  margin: 0 1px;
}
[data-theme="dark"] .mnemo-emph {
  background: color-mix(in srgb, var(--tint) 22%, transparent);
  color: #FF6B61;
}

.mnemo-regen {
  margin-top: 14px;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.mnemo-regen svg { width: 16px; height: 16px; }

.mnemo-disclaimer {
  font-size: 11px;
  color: var(--text-secondary);
  text-align: center;
  margin-top: 10px;
  font-style: italic;
  opacity: 0.7;
  line-height: 1.5;
}

/* ============ CHAT CTA (sur Discuter) ============ */
.chat-cta {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--tint) 14%, var(--bg-card)) 0%,
    var(--bg-card) 100%);
  border: 1px solid color-mix(in srgb, var(--tint) 24%, transparent);
  border-radius: 18px;
  padding: 18px 20px;
  margin-bottom: 16px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(255, 59, 48, 0.08);
}
.chat-cta::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(135deg, var(--tint) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}
.chat-cta:hover {
  transform: translateY(-2px);
  border-color: var(--tint);
  box-shadow: 0 8px 24px rgba(255, 59, 48, 0.15);
}
.chat-cta:hover::before { opacity: 0.06; }
.chat-cta:active { transform: translateY(0); }
.chat-cta-icon {
  font-size: 36px;
  line-height: 1;
  flex-shrink: 0;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.1));
}
.chat-cta-body { flex: 1; min-width: 0; }
.chat-cta-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}
.chat-cta-sub {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.45;
}
.chat-cta-sub strong { color: var(--tint); font-weight: 700; }
.chat-cta-arrow {
  flex-shrink: 0;
  color: var(--tint);
  width: 22px;
  height: 22px;
  transition: transform 0.2s ease;
}
.chat-cta-arrow svg { width: 100%; height: 100%; }
.chat-cta:hover .chat-cta-arrow { transform: translateX(4px); }
[data-theme="dark"] .chat-cta {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--tint) 20%, var(--bg-card)) 0%,
    var(--bg-card) 100%);
  box-shadow: 0 4px 16px rgba(255, 59, 48, 0.15);
}

/* Dialogue exemple collapsible (secondaire) */
.sit-dialogue-details {
  margin-top: 4px;
  background: var(--bg-card);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.sit-dialogue-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  list-style: none;
  user-select: none;
  transition: background 0.15s ease;
}
.sit-dialogue-summary::-webkit-details-marker { display: none; }
.sit-dialogue-summary:hover { background: var(--bg-elev); }
.sit-dialogue-chevron {
  width: 14px;
  height: 14px;
  color: var(--text-secondary);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}
.sit-dialogue-details[open] .sit-dialogue-chevron {
  transform: rotate(90deg);
}
.sit-dialogue-summary > span:nth-of-type(1) { flex: 1; }
.sit-dialogue-count {
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 500;
  background: var(--bg-elev);
  padding: 3px 9px;
  border-radius: 99px;
}
.sit-dialogue-details[open] .sit-dialogue-summary {
  border-bottom: 1px solid var(--border);
}
.sit-dialogue-details .sit-lines {
  padding: 12px 16px 16px;
}

/* ============ CHAT OVERLAY ============ */
.chat-overlay {
  position: fixed;
  inset: 0;
  background: var(--bg-page);
  z-index: 1100;
  display: flex;
  flex-direction: column;
  animation: chatSlideUp 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.chat-overlay.hidden { display: none; }
@keyframes chatSlideUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
body.chat-open { overflow: hidden; }

.chat-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  background: var(--bg-page);
}

/* Header */
.chat-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-card);
  flex-shrink: 0;
  padding-top: max(14px, env(safe-area-inset-top, 0));
}
.chat-back, .chat-reset {
  background: transparent;
  border: 0;
  color: var(--text-primary);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s ease;
}
.chat-back svg, .chat-reset svg { width: 20px; height: 20px; }
.chat-back:hover, .chat-reset:hover { background: var(--bg-elev); }
.chat-header-info {
  flex: 1;
  min-width: 0;
  text-align: center;
}
.chat-scenario-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
}
.chat-scenario-context {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Messages area */
.chat-messages {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.chat-msg {
  display: flex;
  gap: 8px;
  max-width: 88%;
  animation: bubbleIn 0.2s ease;
}
@keyframes bubbleIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.chat-msg-user {
  align-self: flex-end;
  flex-direction: row-reverse;
}
.chat-msg-bot {
  align-self: flex-start;
}

.chat-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--tint);
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  font-family: Georgia, serif;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 4px;
}

.chat-msg-content { display: flex; flex-direction: column; gap: 6px; min-width: 0; }

.chat-bubble {
  background: var(--bg-card);
  border-radius: 16px;
  padding: 10px 14px;
  font-size: 15px;
  color: var(--text-primary);
  line-height: 1.45;
  position: relative;
  word-wrap: break-word;
  overflow-wrap: break-word;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.chat-msg-user .chat-bubble {
  background: var(--tint);
  color: #fff;
  border-bottom-right-radius: 6px;
}
.chat-msg-bot .chat-bubble {
  border-bottom-left-radius: 6px;
}
.chat-bubble-sq {
  font-weight: 600;
  color: var(--text-primary);
  font-size: 15px;
}
.chat-bubble-fr {
  font-size: 13px;
  color: var(--text-secondary);
  font-style: italic;
  margin-top: 4px;
  line-height: 1.4;
}
.chat-audio {
  background: transparent;
  border: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  cursor: pointer;
  margin-top: 6px;
  margin-left: -4px;
  transition: all 0.15s ease;
}
.chat-audio svg { width: 14px; height: 14px; }
.chat-audio:hover { background: var(--bg-elev); color: var(--tint); }
.chat-audio.playing { background: var(--tint); color: #fff; }

.chat-correction {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: color-mix(in srgb, #FF9500 10%, var(--bg-card));
  border-left: 3px solid #FF9500;
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--text-primary);
  line-height: 1.4;
}
[data-theme="dark"] .chat-correction { background: color-mix(in srgb, #FF9F0A 18%, var(--bg-card)); border-left-color: #FF9F0A; }
.chat-correction svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: #FF9500;
  margin-top: 1px;
}
[data-theme="dark"] .chat-correction svg { color: #FF9F0A; }

/* Typing indicator */
.chat-typing .chat-bubble-typing {
  padding: 12px 16px;
  display: inline-flex;
  gap: 4px;
  align-items: center;
}
.chat-bubble-typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-secondary);
  opacity: 0.5;
  animation: typingDot 1.2s infinite ease-in-out;
}
.chat-bubble-typing span:nth-child(2) { animation-delay: 0.15s; }
.chat-bubble-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes typingDot {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-4px); opacity: 1; }
}

.chat-error {
  align-self: center;
  background: color-mix(in srgb, var(--tint) 12%, var(--bg-card));
  color: var(--tint);
  border-radius: 10px;
  padding: 8px 14px;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.chat-error svg { width: 16px; height: 16px; flex-shrink: 0; }

/* Input area */
.chat-input-area {
  flex-shrink: 0;
  border-top: 1px solid var(--border);
  background: var(--bg-card);
  padding: 12px 16px;
  padding-bottom: max(12px, env(safe-area-inset-bottom, 0));
}
.chat-input-wrap {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  background: var(--bg-elev);
  border-radius: 22px;
  padding: 6px 6px 6px 16px;
}
#chatInput {
  flex: 1;
  background: transparent;
  border: 0;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 15px;
  line-height: 1.45;
  outline: none;
  resize: none;
  padding: 8px 0;
  min-height: 22px;
  max-height: 140px;
}
#chatInput::placeholder { color: var(--text-secondary); }
.chat-send {
  background: var(--tint);
  border: 0;
  color: #fff;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.15s ease;
}
.chat-send svg { width: 16px; height: 16px; }
.chat-send:hover { filter: brightness(1.05); transform: scale(1.05); }
.chat-send:active { transform: scale(0.95); }
.chat-input-hint {
  font-size: 10.5px;
  color: var(--text-secondary);
  text-align: center;
  margin-top: 6px;
  opacity: 0.7;
}
@media (max-width: 600px) {
  .chat-input-hint { display: none; }
}

/* ============ CONJUGATE EXERCISE ============ */
.conjugate-verb {
  text-align: center;
  margin-bottom: 4px;
}
.conjugate-inf {
  font-size: 32px;
  font-weight: 700;
  color: var(--tint);
  line-height: 1.1;
}
.conjugate-meaning {
  font-size: 13px;
  color: var(--text-secondary);
  font-style: italic;
  margin-top: 2px;
}
.conjugate-arrow {
  font-size: 18px;
  color: var(--text-secondary);
  opacity: 0.5;
}
.conjugate-pronoun {
  display: flex;
  align-items: baseline;
  gap: 10px;
  background: var(--bg-elev);
  padding: 12px 20px;
  border-radius: 12px;
  margin-bottom: 4px;
}
.conjugate-pronoun-label {
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.conjugate-pronoun-text {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
}
.conjugate-prompt-fr {
  font-size: 14px;
  color: var(--text-secondary);
  font-style: italic;
}

/* ============ LISTEN CTA (sidebar Mots) ============ */
.listen-cta {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin-top: 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 13px 14px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: all 0.18s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.listen-cta:hover {
  border-color: var(--tint);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}
.listen-cta-icon {
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
}
.listen-cta-body { flex: 1; min-width: 0; }
.listen-cta-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 1px;
}
.listen-cta-sub {
  font-size: 11.5px;
  color: var(--text-secondary);
  line-height: 1.35;
}
.listen-cta-arrow {
  width: 14px;
  height: 14px;
  color: var(--tint);
  flex-shrink: 0;
}

/* ============ LISTEN OVERLAY ============ */
.listen-overlay {
  position: fixed;
  inset: 0;
  background: var(--bg-page);
  z-index: 1100;
  display: flex;
  flex-direction: column;
  animation: chatSlideUp 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.listen-overlay.hidden { display: none; }

.listen-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  padding-bottom: max(24px, env(safe-area-inset-bottom, 0));
}

.listen-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  padding-top: max(14px, env(safe-area-inset-top, 0));
  flex-shrink: 0;
}
.listen-header-info {
  flex: 1;
  text-align: center;
}
.listen-header-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.listen-header-counter {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-primary);
  margin-top: 2px;
}

.listen-stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px 24px;
  gap: 12px;
  text-align: center;
  min-height: 0;
}
.listen-img {
  font-size: 72px;
  line-height: 1;
  margin-bottom: 12px;
  filter: drop-shadow(0 4px 16px rgba(0,0,0,0.1));
}
.listen-sq {
  font-size: clamp(36px, 7vw, 60px);
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.1;
  letter-spacing: -0.02em;
  word-break: break-word;
  transition: color 0.3s ease, transform 0.3s ease;
}
.listen-sq.listen-active-stage {
  color: var(--tint);
  transform: scale(1.02);
}
.listen-fr {
  font-size: clamp(18px, 3vw, 24px);
  color: var(--text-secondary);
  font-style: italic;
  transition: color 0.3s ease;
}
.listen-fr.listen-active-stage {
  color: var(--text-primary);
  font-style: normal;
}
.listen-phon {
  font-size: 14px;
  color: var(--text-secondary);
  opacity: 0.7;
}

.listen-rates {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  flex-shrink: 0;
}
.listen-rate-btn {
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  border-radius: 99px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.15s ease;
}
.listen-rate-btn:hover {
  background: var(--bg-pressed);
}
.listen-rate-btn.active {
  background: var(--tint);
  border-color: var(--tint);
  color: #fff;
}

.listen-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  padding: 16px;
  flex-shrink: 0;
}
.listen-ctrl {
  background: var(--bg-card);
  border: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.listen-ctrl:hover { transform: scale(1.05); }
.listen-ctrl:active { transform: scale(0.95); }
.listen-ctrl-primary {
  width: 80px;
  height: 80px;
  background: var(--tint);
  color: #fff;
  box-shadow: 0 8px 24px rgba(255, 59, 48, 0.3);
}
.listen-ctrl-primary svg { width: 32px; height: 32px; }
.listen-ctrl-secondary {
  width: 56px;
  height: 56px;
  color: var(--text-primary);
}
.listen-ctrl-secondary svg { width: 22px; height: 22px; }

.listen-tip {
  text-align: center;
  font-size: 11px;
  color: var(--text-secondary);
  opacity: 0.6;
  padding: 0 16px 8px;
  flex-shrink: 0;
}
@media (max-width: 600px) { .listen-tip { display: none; } }

/* ============ SOUNDS GRID (Guide prononciation) ============ */
/* ============ ALPHABET GRID ============ */
.alpha-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 12px;
}
@media (min-width: 500px) {
  .alpha-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 700px) {
  .alpha-grid { grid-template-columns: repeat(6, 1fr); }
}
.alpha-cell {
  background: var(--bg-card);
  border-radius: 14px;
  padding: 14px 8px 10px;
  border: 1.5px solid transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
  font-family: inherit;
  min-height: 90px;
  text-align: center;
}
.alpha-cell:hover { background: var(--bg-pressed); }
.alpha-cell:active { transform: scale(0.96); }
.alpha-cell.alpha-cell-active {
  background: var(--tint);
  color: #fff;
  transform: scale(1.05);
}
.alpha-cell.alpha-cell-active .alpha-sound,
.alpha-cell.alpha-cell-active .alpha-letter-lower {
  color: rgba(255,255,255,0.85);
}
.alpha-cell-fr {
  /* identique au français : neutre */
}
.alpha-cell-tint {
  /* lettre absente du français : accent tint subtil */
  border-color: color-mix(in srgb, var(--tint) 35%, transparent);
  background: color-mix(in srgb, var(--tint) 6%, var(--bg-card));
}
.alpha-cell-warm {
  /* digramme : accent warm/orange subtil */
  border-color: color-mix(in srgb, #ff9500 40%, transparent);
  background: color-mix(in srgb, #ff9500 7%, var(--bg-card));
}
.alpha-letter {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  line-height: 1;
  display: flex;
  align-items: baseline;
  gap: 2px;
}
.alpha-letter-lower {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-left: 2px;
}
.alpha-sound {
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.3;
  font-weight: 500;
  font-style: italic;
}
.alpha-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  margin-top: 16px;
  padding: 0 4px;
}
.alpha-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-secondary);
}
.alpha-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex-shrink: 0;
}
.alpha-legend-dot-tint {
  background: color-mix(in srgb, var(--tint) 25%, var(--bg-card));
  border: 1.5px solid color-mix(in srgb, var(--tint) 50%, transparent);
}
.alpha-legend-dot-warm {
  background: color-mix(in srgb, #ff9500 25%, var(--bg-card));
  border: 1.5px solid color-mix(in srgb, #ff9500 55%, transparent);
}

.sounds-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 700px) {
  .sounds-grid { grid-template-columns: repeat(2, 1fr); }
}
.sound-card {
  background: var(--bg-card);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sound-header {
  display: flex;
  align-items: center;
  gap: 14px;
}
.sound-letter {
  font-size: 38px;
  font-weight: 800;
  color: var(--tint);
  line-height: 1;
  background: color-mix(in srgb, var(--tint) 10%, var(--bg-elev));
  width: 60px;
  height: 60px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-family: Georgia, serif;
}
[data-theme="dark"] .sound-letter {
  background: color-mix(in srgb, var(--tint) 18%, var(--bg-elev));
}
.sound-info { flex: 1; min-width: 0; }
.sound-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 2px;
}
.sound-ipa {
  font-size: 13px;
  color: var(--text-secondary);
  font-family: ui-monospace, SFMono-Regular, monospace;
}
.sound-desc {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-primary);
}
.sound-desc em {
  background: var(--bg-elev);
  font-style: normal;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 5px;
  color: var(--tint);
}
.sound-examples-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.sound-examples {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.sound-example {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 99px;
  padding: 6px 12px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.15s ease;
}
.sound-example svg {
  width: 12px;
  height: 12px;
  color: var(--tint);
}
.sound-example:hover {
  background: color-mix(in srgb, var(--tint) 10%, var(--bg-elev));
  border-color: var(--tint);
}
.sound-tip {
  display: flex;
  gap: 10px;
  background: color-mix(in srgb, var(--tint) 6%, var(--bg-elev));
  border-left: 3px solid var(--tint);
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-primary);
}
[data-theme="dark"] .sound-tip {
  background: color-mix(in srgb, var(--tint) 12%, var(--bg-elev));
}
.sound-tip svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: var(--tint);
  margin-top: 1px;
}
.sound-tip span { flex: 1; }

/* ============ ONBOARDING ============ */
/* ============ LANGUAGE PICKER (premier visit, avant onboarding) ============ */
.lang-picker-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: langPickerFadeIn 0.4s ease-out;
}
.lang-picker-overlay.hidden { display: none; }
@keyframes langPickerFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.lang-picker-modal {
  background: var(--bg-card);
  border-radius: 24px;
  padding: 36px 28px 28px;
  max-width: 420px;
  width: 100%;
  text-align: center;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
  animation: langPickerScale 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes langPickerScale {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}
.lang-picker-flag {
  font-size: 56px;
  line-height: 1;
  margin-bottom: 18px;
}
.lang-picker-title-en,
.lang-picker-title-fr {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--text-primary);
}
.lang-picker-title-fr {
  font-size: 17px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-top: 4px;
  margin-bottom: 14px;
}
.lang-picker-sub {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-secondary);
  margin-bottom: 24px;
}
.lang-picker-sub-en,
.lang-picker-sub-fr {
  display: block;
}
.lang-picker-sub-fr {
  margin-top: 6px;
  font-size: 12px;
  opacity: 0.7;
}
.lang-picker-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}
.lang-picker-option {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--bg-elev);
  border: 2px solid var(--border);
  border-radius: 14px;
  padding: 14px 16px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: all 0.18s ease;
  width: 100%;
}
.lang-picker-option:hover {
  border-color: var(--tint);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(255, 59, 48, 0.15);
}
.lang-picker-option:active {
  transform: translateY(0);
}
.lang-picker-option-flag {
  font-size: 32px;
  line-height: 1;
  flex-shrink: 0;
}
.lang-picker-option-body { flex: 1; min-width: 0; }
.lang-picker-option-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
  margin-bottom: 2px;
}
.lang-picker-option-sub {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.3;
}
.lang-picker-foot {
  font-size: 11px;
  color: var(--text-tertiary, var(--text-secondary));
  opacity: 0.7;
  line-height: 1.4;
}
.lang-picker-foot-en,
.lang-picker-foot-fr {
  display: block;
}
.lang-picker-foot-fr { margin-top: 2px; }

/* ============ ONBOARDING ============ */
.onboarding-overlay {
  position: fixed;
  inset: 0;
  background: var(--bg-page);
  z-index: 1200;
  display: flex;
  flex-direction: column;
  animation: chatSlideUp 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}
.onboarding-overlay.hidden { display: none; }

.onboarding-container {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: 24px;
  padding-top: max(24px, env(safe-area-inset-top, 0));
  padding-bottom: max(24px, env(safe-area-inset-bottom, 0));
}

.onboarding-skip {
  position: absolute;
  top: max(20px, env(safe-area-inset-top, 0));
  right: 20px;
  background: transparent;
  border: 0;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 8px 12px;
  border-radius: 99px;
  cursor: pointer;
  z-index: 10;
}
.onboarding-skip:hover { background: var(--bg-elev); color: var(--text-primary); }

.onboarding-slides {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 0;
  min-height: 0;
}
.onboarding-slide {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  animation: onboardingIn 0.28s ease;
}
.onboarding-slide.hidden { display: none; }
@keyframes onboardingIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.onboarding-logo {
  width: 112px;
  height: 112px;
  margin-bottom: 28px;
  filter: drop-shadow(0 12px 32px rgba(255, 59, 48, 0.25));
}
.onboarding-logo-img { width: 100%; height: 100%; display: block; }

.onboarding-emoji {
  font-size: 80px;
  line-height: 1;
  margin-bottom: 24px;
  filter: drop-shadow(0 6px 20px rgba(0,0,0,0.08));
}

.onboarding-pillar {
  font-size: 11px;
  font-weight: 800;
  color: var(--tint);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 10px;
}

.onboarding-title {
  font-size: clamp(26px, 5vw, 34px);
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.15;
  margin-bottom: 14px;
  letter-spacing: -0.02em;
}

.onboarding-text {
  font-size: 16px;
  line-height: 1.55;
  color: var(--text-secondary);
  max-width: 440px;
}
.onboarding-text strong {
  color: var(--text-primary);
  font-weight: 600;
}

.onboarding-choices {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  margin-top: 28px;
  max-width: 440px;
}
.onboarding-choice {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 16px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: all 0.18s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.onboarding-choice:hover {
  border-color: var(--tint);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255, 59, 48, 0.1);
}
.onboarding-choice.onboarding-choice-active {
  border-color: var(--tint);
  background: color-mix(in srgb, var(--tint) 8%, var(--bg-card));
  transform: scale(0.98);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tint) 25%, transparent);
}

/* États mini-quiz onboarding : feedback visuel après tap */
.onboarding-mini-choice {
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
}
.onboarding-mini-choice .onboarding-choice-title {
  font-size: 18px;
  font-weight: 700;
  text-align: center;
}
.onboarding-mini-choice.is-correct {
  border-color: #34C759;
  background: color-mix(in srgb, #34C759 12%, var(--bg-card));
  box-shadow: 0 0 0 2px color-mix(in srgb, #34C759 30%, transparent);
  animation: miniBounce 0.4s ease;
}
.onboarding-mini-choice.is-wrong {
  border-color: #FF3B30;
  background: color-mix(in srgb, #FF3B30 10%, var(--bg-card));
  box-shadow: 0 0 0 2px color-mix(in srgb, #FF3B30 25%, transparent);
  animation: miniShake 0.3s ease;
}
.onboarding-mini-choice.is-disabled {
  opacity: 0.5;
  pointer-events: none;
}
@keyframes miniBounce {
  0%, 100% { transform: scale(1); }
  40% { transform: scale(1.05); }
  70% { transform: scale(0.98); }
}
@keyframes miniShake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}
.onboarding-mini-feedback {
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
  animation: feedbackIn 0.3s ease;
}
.onboarding-mini-feedback.is-correct {
  background: color-mix(in srgb, #34C759 12%, var(--bg-card));
  color: #15803D;
  border: 1px solid color-mix(in srgb, #34C759 25%, transparent);
}
.onboarding-mini-feedback.is-wrong {
  background: color-mix(in srgb, #FF9500 12%, var(--bg-card));
  color: #B45309;
  border: 1px solid color-mix(in srgb, #FF9500 25%, transparent);
}
[data-theme="dark"] .onboarding-mini-feedback.is-correct { color: #6EE7B7; }
[data-theme="dark"] .onboarding-mini-feedback.is-wrong { color: #FBBF24; }
@keyframes feedbackIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.onboarding-choice-emoji {
  font-size: 28px;
  line-height: 1;
  flex-shrink: 0;
}
.onboarding-choice-body { flex: 1; min-width: 0; }
.onboarding-choice-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 2px;
}
.onboarding-choice-sub {
  font-size: 12px;
  color: var(--text-secondary);
}

.onboarding-footer {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
}
.onboarding-dots {
  display: flex;
  gap: 6px;
}
.onboarding-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--bg-elev);
  cursor: pointer;
  transition: all 0.2s ease;
}
.onboarding-dot.active {
  background: var(--tint);
  width: 24px;
  border-radius: 99px;
}
.onboarding-nav {
  display: flex;
  gap: 10px;
  width: 100%;
  max-width: 440px;
}
.onboarding-nav-btn {
  flex: 1;
  padding: 14px 20px;
  border-radius: 12px;
  border: 0;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}
.onboarding-nav-btn.hidden { display: none; }
.onboarding-nav-back {
  background: var(--bg-card);
  color: var(--text-primary);
  border: 1px solid var(--border);
  flex: 0 0 auto;
}
.onboarding-nav-back:hover { background: var(--bg-pressed); }
.onboarding-nav-next {
  background: var(--tint);
  color: #fff;
  box-shadow: 0 4px 12px rgba(255, 59, 48, 0.2);
}
.onboarding-nav-next:hover { filter: brightness(1.05); }

/* ============ HOMEPAGE (Aujourd'hui) ============ */
.home-greeting {
  margin-bottom: 24px;
}
.home-greeting-hi {
  font-size: clamp(24px, 4vw, 32px);
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.home-greeting-date {
  font-size: 14px;
  color: var(--text-secondary);
  margin-top: 4px;
  text-transform: capitalize;
}

/* ============================================================
   WEEKLY STATS — récap "Cette semaine" sur la home
   Petite card sous les missions avec 3 stats clés et tendance vs semaine
   précédente. Cachée si aucune activité cette semaine.
   ============================================================ */
.weekly-stats {
  margin-top: 18px;
  padding: 16px 16px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--card-shadow);
}
.weekly-stats.hidden { display: none; }
.weekly-stats-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 14px;
}
.weekly-stats-title {
  font-size: 14px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}
.weekly-stats-period {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.weekly-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.weekly-stat-cell {
  text-align: center;
  padding: 8px 4px;
  background: var(--bg-page);
  border-radius: 12px;
}
.weekly-stat-emoji {
  font-size: 20px;
  line-height: 1;
  margin-bottom: 4px;
}
.weekly-stat-val {
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.weekly-stat-lbl {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 2px;
}
.weekly-stats-trend {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  text-align: center;
  line-height: 1.4;
}
.weekly-stats-trend:empty { display: none; }
.weekly-stats-trend strong { color: var(--text-primary); }
.weekly-stats-trend.is-up    strong { color: #15803D; }
.weekly-stats-trend.is-down  strong { color: #B91C1C; }
[data-theme="dark"] .weekly-stats-trend.is-up    strong { color: #6EE7B7; }
[data-theme="dark"] .weekly-stats-trend.is-down  strong { color: #FCA5A5; }

/* ============================================================
   DIR-TOGGLE — bascule entre AL→FR (comprendre) et FR→AL (produire)
   Segmented control compact, juste sous les mode-pills dans la vue Mots.
   ============================================================ */
.dir-toggle {
  display: flex;
  gap: 6px;
  padding: 4px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 14px;
  box-shadow: var(--card-shadow);
}
.dir-toggle-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 10px;
  background: transparent;
  border: none;
  border-radius: 9px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, transform 0.16s ease;
  letter-spacing: -0.01em;
}
.dir-toggle-btn:hover  { background: var(--bg-page); }
.dir-toggle-btn:active { transform: scale(0.97); }
.dir-toggle-btn.active {
  background: var(--tint);
  color: white;
  box-shadow: 0 1px 3px color-mix(in srgb, var(--tint) 35%, transparent);
}
.dir-toggle-from,
.dir-toggle-to {
  font-size: 14px;
  line-height: 1;
}
.dir-toggle-arrow {
  font-size: 12px;
  opacity: 0.7;
  font-weight: 800;
}
.dir-toggle-lbl {
  font-size: 12px;
  font-weight: 800;
  margin-left: 2px;
}
@media (max-width: 360px) {
  .dir-toggle-lbl { display: none; }
}

/* Eagles banner : indicateur passif sur la home si l'user a des aigles */
.eagles-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--tint) 8%, var(--bg-card)) 0%, color-mix(in srgb, #FF9500 6%, var(--bg-card)) 100%);
  border: 1px solid color-mix(in srgb, var(--tint) 16%, transparent);
  border-radius: 10px;
  padding: 10px 16px;
  margin-bottom: 14px;
  animation: eaglesBannerIn 0.4s ease;
}
@keyframes eaglesBannerIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}
/* [v175] Wrapper invisible (pas de background) de 48px pour que le centre
   de l'aigle s'aligne verticalement avec le centre des icônes des cards
   "À faire" en dessous (padding 16 + icon-width/2 = 40px du bord). */
.eagles-banner-icon {
  font-size: 20px;
  line-height: 1;
  flex-shrink: 0;
  width: 48px;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.eagles-banner-body { flex: 1; min-width: 0; }
.eagles-banner-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.005em;
  line-height: 1.3;
}
.eagles-banner-sub {
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.35;
  margin-top: 1px;
}

.home-section-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 20px 0 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ============ PARCOURS CARD (v159) ============ */
.path-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  padding: 14px 14px 12px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--tint) 8%, var(--bg-card)), var(--bg-card));
  border: 1px solid color-mix(in srgb, var(--tint) 22%, transparent);
  border-radius: 16px;
  text-align: left;
  font-family: inherit;
  color: var(--text-primary);
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  margin-bottom: 12px;
}
.path-card:active { transform: scale(0.985); }
.path-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.path-card-icon {
  font-size: 32px;
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--tint) 14%, var(--bg-card));
  border-radius: 12px;
  flex-shrink: 0;
}
.path-card-body { flex: 1; min-width: 0; }
.path-card-eyebrow {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--tint);
  margin-bottom: 2px;
}
.path-card-title {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin-bottom: 2px;
}
.path-card-sub {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.35;
}
.path-card-arrow {
  font-size: 22px;
  color: var(--text-secondary);
  flex-shrink: 0;
  align-self: center;
}
.path-card-progress {
  display: flex;
  align-items: center;
  gap: 8px;
}
.path-bar-track {
  flex: 1;
  height: 6px;
  background: var(--bg-elev);
  border-radius: 99px;
  overflow: hidden;
}
.path-bar-fill {
  height: 100%;
  background: var(--tint);
  border-radius: 99px;
  transition: width 0.4s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.path-progress-text {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

/* ============ PARCOURS OVERLAY ============ */
.path-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 1000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.path-overlay.hidden { display: none; }
.path-modal {
  background: var(--bg-card);
  width: 100%;
  max-width: 600px;
  max-height: 85vh;
  border-radius: 20px 20px 0 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: slideUp 0.28s cubic-bezier(0.2, 0.7, 0.3, 1);
}
@media (min-width: 600px) {
  .path-modal { border-radius: 20px; max-height: 90vh; margin-bottom: 24px; }
}
.path-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 16px;
}
.path-modal-title-wrap { display: flex; align-items: center; gap: 10px; }
.path-modal-icon { font-size: 22px; }
.path-modal-title { font-size: 18px; font-weight: 800; }
.path-modal-close {
  width: 32px; height: 32px;
  border: 0; background: var(--bg-elev);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-primary); cursor: pointer;
}
.path-modal-close svg { width: 18px; height: 18px; }
.path-modal-body {
  padding: 0 20px 32px;
  overflow-y: auto;
  flex: 1;
}
.path-unit-row {
  display: flex;
  gap: 12px;
  padding: 14px;
  background: var(--bg-elev);
  border-radius: 14px;
  margin-bottom: 10px;
  position: relative;
}
.path-unit-row.current {
  background: color-mix(in srgb, var(--tint) 8%, var(--bg-elev));
  border: 1.5px solid color-mix(in srgb, var(--tint) 30%, transparent);
}
.path-unit-row.completed { opacity: 0.7; }
.path-unit-row.locked { opacity: 0.5; }
.path-unit-icon {
  font-size: 28px;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-card);
  border-radius: 10px;
  flex-shrink: 0;
}
.path-unit-body { flex: 1; min-width: 0; }
.path-unit-eyebrow {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  margin-bottom: 3px;
}
.path-unit-eyebrow.current { color: var(--tint); }
.path-unit-title {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 2px;
}
.path-unit-sub {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 6px;
  line-height: 1.35;
}
.path-unit-progress-text {
  font-size: 11px;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.path-unit-check {
  align-self: center;
  font-size: 22px;
  color: var(--green);
  flex-shrink: 0;
}
.path-unit-lock {
  align-self: center;
  font-size: 16px;
  opacity: 0.6;
  flex-shrink: 0;
}
.path-modal-intro {
  background: color-mix(in srgb, var(--tint) 6%, transparent);
  border-left: 3px solid var(--tint);
  padding: 12px 14px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-primary);
  margin-bottom: 16px;
}
.path-unit-action {
  display: block;
  width: 100%;
  padding: 14px;
  background: var(--tint);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  border-radius: 12px;
  border: 0;
  cursor: pointer;
  margin-top: 8px;
}
.path-unit-action:active { transform: scale(0.98); }
.home-section-count {
  background: var(--bg-elev);
  color: var(--text-secondary);
  padding: 3px 10px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.home-missions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}
.mission-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px 16px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  width: 100%;
  transition: all 0.18s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.mission-card:hover {
  border-color: var(--tint);
  transform: translateY(-1px);
}
.mission-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--bg-elev);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}
.mission-body { flex: 1; min-width: 0; }
.mission-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 6px;
}
.mission-progress {
  display: flex;
  align-items: center;
  gap: 8px;
}
.mission-bar-track {
  flex: 1;
  height: 6px;
  background: var(--bg-elev);
  border-radius: 99px;
  overflow: hidden;
}
.mission-bar-fill {
  height: 100%;
  background: var(--tint);
  border-radius: 99px;
  width: 0%;
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.mission-progress-text {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  flex-shrink: 0;
}
/* [v221] Barre de progression objectif XP du jour — au-dessus des missions */
.daily-xp-bar {
  margin: 8px 0 14px;
  padding: 12px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  transition: border-color 0.2s ease;
}
.daily-xp-bar.is-reached {
  border-color: color-mix(in srgb, var(--green) 40%, transparent);
  background: color-mix(in srgb, var(--green) 6%, var(--bg-card));
}
.daily-xp-bar-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  gap: 12px;
}
.daily-xp-bar-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}
.daily-xp-bar-count {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.daily-xp-bar.is-reached .daily-xp-bar-count { color: var(--green); }
.daily-xp-bar-track {
  height: 8px;
  background: var(--bg-elev);
  border-radius: 99px;
  overflow: hidden;
}
.daily-xp-bar-fill {
  height: 100%;
  background: var(--tint);
  border-radius: 99px;
  width: 0%;
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.daily-xp-bar.is-reached .daily-xp-bar-fill { background: var(--green); }
.mission-check {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--text-secondary);
  font-size: 22px;
  font-weight: 700;
  flex-shrink: 0;
  transition: all 0.25s ease;
}
.mission-check svg { width: 16px; height: 16px; }

.mission-card.mission-done {
  background: color-mix(in srgb, var(--green) 8%, var(--bg-card));
  border-color: color-mix(in srgb, var(--green) 30%, transparent);
}
.mission-card.mission-done .mission-icon {
  background: color-mix(in srgb, var(--green) 18%, var(--bg-elev));
}
.mission-card.mission-done .mission-bar-fill { background: var(--green); }
.mission-card.mission-done .mission-check {
  background: var(--green);
  color: #fff;
}
[data-theme="dark"] .mission-card.mission-done {
  background: color-mix(in srgb, var(--green) 14%, var(--bg-card));
}

/* ============ NOTE PERSO ============ */
.note-trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 11px 14px;
  margin-top: 8px;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  text-align: left;
  transition: all 0.18s ease;
}
.note-trigger:hover {
  background: var(--bg-elev);
  color: var(--text-primary);
}
.note-trigger.has-note {
  background: color-mix(in srgb, #FFCC00 8%, var(--bg-card));
  border-color: color-mix(in srgb, #FFCC00 28%, var(--border));
  color: var(--text-primary);
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
[data-theme="dark"] .note-trigger.has-note {
  background: color-mix(in srgb, #FFD60A 14%, var(--bg-card));
  border-color: color-mix(in srgb, #FFD60A 30%, var(--border));
}
.note-trigger.has-note .note-trigger-label {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.note-trigger.has-note .note-trigger-label::before {
  content: "📝";
}
.note-trigger.has-note .note-trigger-icon {
  display: none;
}
.note-trigger-icon { font-size: 16px; line-height: 1; flex-shrink: 0; }
.note-trigger-label { flex: 1; }
.note-trigger-preview {
  font-size: 13.5px;
  font-weight: 400;
  color: var(--text-primary);
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Note modal */
.note-modal { max-width: 520px; }
.note-body {
  padding: 16px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
#noteTextarea {
  width: 100%;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  font-family: inherit;
  font-size: 15px;
  color: var(--text-primary);
  line-height: 1.5;
  resize: vertical;
  min-height: 140px;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
#noteTextarea:focus {
  border-color: var(--tint);
  box-shadow: 0 0 0 3px rgba(255, 59, 48, 0.1);
}
#noteTextarea::placeholder {
  color: var(--text-secondary);
  opacity: 0.7;
}
.note-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.note-actions-right {
  display: flex;
  gap: 8px;
  margin-left: auto;
}
.note-btn {
  padding: 10px 16px;
  border-radius: 10px;
  border: 0;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.note-btn-primary {
  background: var(--tint);
  color: #fff;
}
.note-btn-primary:hover { filter: brightness(1.05); }
.note-btn-secondary {
  background: var(--bg-elev);
  color: var(--text-primary);
}
.note-btn-secondary:hover { background: var(--bg-pressed); }
.note-btn-delete {
  background: transparent;
  color: var(--tint);
  font-weight: 600;
}
.note-btn-delete:hover { background: color-mix(in srgb, var(--tint) 10%, transparent); }
.note-btn-delete svg { width: 14px; height: 14px; }
.note-btn-delete.hidden { display: none; }

/* ============ XP MODAL ============ */
.xp-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 1100;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  animation: chatSlideUp 0.22s ease;
}
.xp-overlay.hidden { display: none; }

.xp-modal {
  background: var(--bg-page);
  border-radius: 24px 24px 0 0;
  width: 100%;
  max-width: 520px;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 -10px 40px rgba(0,0,0,0.2);
  animation: xpModalIn 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes xpModalIn {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
@media (min-width: 700px) {
  .xp-overlay { align-items: center; padding: 24px; }
  .xp-modal { border-radius: 24px; max-height: 86vh; }
}

.xp-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 12px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.xp-modal-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 17px;
  font-weight: 700;
  color: var(--text-primary);
}
.xp-modal-icon { font-size: 22px; line-height: 1; }
.xp-modal-close {
  background: var(--bg-elev);
  border: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  cursor: pointer;
}
.xp-modal-close:hover { background: var(--bg-pressed); color: var(--text-primary); }
.xp-modal-close svg { width: 16px; height: 16px; }

.xp-modal-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 20px;
  padding-bottom: max(20px, env(safe-area-inset-bottom, 0));
}

.xp-status {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--tint) 8%, var(--bg-card)) 0%,
    var(--bg-card) 100%);
  border: 1px solid color-mix(in srgb, var(--tint) 18%, var(--border));
  border-radius: 18px;
  padding: 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.xp-status-val {
  font-size: 36px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.xp-status-tier-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  padding: 5px 12px 5px 10px;
  border-radius: 99px;
  letter-spacing: 0.02em;
}
.xp-status-tier-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.xp-status-tier-icon svg { width: 100%; height: 100%; display: block; }
.xp-status-tier-badge[data-tier="bronze"]   { background: #CD7F3220; color: #B8732D; }
.xp-status-tier-badge[data-tier="silver"]   { background: #9CA3AF20; color: #6B7280; }
[data-theme="dark"] .xp-status-tier-badge[data-tier="silver"] { color: #C0C0C0; }
.xp-status-tier-badge[data-tier="gold"]     { background: #FFD70025; color: #B8860B; }
[data-theme="dark"] .xp-status-tier-badge[data-tier="gold"] { color: #FFD700; }
.xp-status-tier-badge[data-tier="platinum"] { background: #93C5FD25; color: #2563EB; }
.xp-status-tier-badge[data-tier="diamond"]  {
  background: linear-gradient(135deg, #B9F2FF40 0%, #93C5FD30 100%);
  color: #06b6d4;
}

.xp-status-progress-track {
  width: 100%;
  height: 8px;
  background: var(--bg-elev);
  border-radius: 99px;
  overflow: hidden;
  margin-top: 6px;
}
.xp-status-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--tint), #FF6B5C);
  border-radius: 99px;
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.xp-status-next {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.4;
}
.xp-status-next strong { color: var(--text-primary); font-weight: 700; }

.xp-explain {
  margin-top: 16px;
  padding: 14px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-secondary);
  background: var(--bg-elev);
  border-radius: 12px;
}
.xp-explain strong { color: var(--text-primary); font-weight: 600; }

/* Resources : streak, gels, mots maîtrisés */
.xp-resources {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.xp-resource {
  background: var(--bg-card);
  border-radius: 14px;
  padding: 14px 8px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.xp-resource-icon {
  font-size: 24px;
  line-height: 1;
  margin-bottom: 2px;
}
.xp-resource-val {
  font-size: 22px;
  font-weight: 900;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.xp-resource-label {
  font-size: 11px;
  color: var(--text-secondary);
  font-weight: 600;
  line-height: 1.2;
}
.xp-resource-hint {
  margin-top: 10px;
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.4;
  padding: 0 4px;
}
.xp-resource-hint strong { color: var(--text-primary); font-weight: 700; }

.xp-modal-section-title {
  font-size: 11px;
  font-weight: 800;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin: 22px 0 10px;
}

.xp-earn {
  background: var(--bg-card);
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.xp-earn-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  font-size: 13.5px;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border);
}
.xp-earn-row:last-child { border-bottom: 0; }
.xp-earn-row > span:last-child { line-height: 1.4; }
.xp-earn-amount {
  flex-shrink: 0;
  background: color-mix(in srgb, var(--tint) 12%, var(--bg-elev));
  color: var(--tint);
  font-weight: 800;
  font-size: 12.5px;
  padding: 4px 10px;
  border-radius: 99px;
  min-width: 44px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.xp-earn-row-muted { opacity: 0.65; }
[data-theme="dark"] .xp-earn-amount {
  background: color-mix(in srgb, var(--tint) 22%, var(--bg-elev));
}

.xp-levels {
  background: var(--bg-card);
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.xp-level-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  font-size: 14px;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border);
  position: relative;
}
.xp-level-row:last-child { border-bottom: 0; }
.xp-level-bullet {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--bg-elev);
  flex-shrink: 0;
}
.xp-level-row[data-tier="bronze"].reached .xp-level-bullet   { background: #CD7F32; }
.xp-level-row[data-tier="silver"].reached .xp-level-bullet   { background: #9CA3AF; }
.xp-level-row[data-tier="gold"].reached .xp-level-bullet     { background: #FFD700; }
.xp-level-row[data-tier="platinum"].reached .xp-level-bullet { background: #93C5FD; }
.xp-level-row[data-tier="diamond"].reached .xp-level-bullet  { background: linear-gradient(135deg, #B9F2FF, #93C5FD); }
.xp-level-row.reached { color: var(--text-primary); }
.xp-level-row.current { background: color-mix(in srgb, var(--tint) 7%, var(--bg-card)); }
[data-theme="dark"] .xp-level-row.current { background: color-mix(in srgb, var(--tint) 14%, var(--bg-card)); }
.xp-level-row.current .xp-level-name { font-weight: 700; }
.xp-level-name { flex: 1; }
.xp-level-xp {
  font-size: 12.5px;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.xp-level-here-tag {
  background: var(--tint);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  border-radius: 99px;
}

/* xp badge becomes a button now */
button.xp-badge {
  font-family: inherit;
  cursor: pointer;
  transition: all 0.15s ease;
}
button.xp-badge:active { transform: scale(0.94); }
button.xp-badge:hover { filter: brightness(1.06); }

/* ============ AUTH OVERLAY ============ */
.auth-overlay {
  position: fixed;
  inset: 0;
  background: var(--bg-page);
  z-index: 1300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  padding-top: max(40px, env(safe-area-inset-top, 0));
  padding-bottom: max(40px, env(safe-area-inset-bottom, 0));
  overflow-y: auto;
}
.auth-overlay.hidden { display: none; }

.auth-container {
  width: 100%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.auth-logo {
  width: 96px;
  height: 96px;
  margin-bottom: 24px;
  filter: drop-shadow(0 10px 28px rgba(255, 59, 48, 0.25));
}
.auth-logo-img { width: 100%; height: 100%; display: block; }

.auth-title {
  font-size: clamp(24px, 5vw, 30px);
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  margin-bottom: 6px;
  line-height: 1.15;
}
.auth-subtitle {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--text-secondary);
  margin-bottom: 28px;
  max-width: 320px;
}

.auth-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.auth-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
}
.auth-field label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding-left: 2px;
}
.auth-label-optional {
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  opacity: 0.7;
  margin-left: 4px;
}
.auth-field-referral input {
  font-family: 'SF Mono', Menlo, Monaco, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Banner invitation : affiché au-dessus du form quand un code parrainage est détecté */
.auth-referral-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--tint) 14%, var(--bg-card)) 0%, color-mix(in srgb, #FF9500 12%, var(--bg-card)) 100%);
  border: 1px solid color-mix(in srgb, var(--tint) 30%, transparent);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 20px;
  text-align: left;
  animation: bannerSlideIn 0.4s ease;
}
@keyframes bannerSlideIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}
.auth-referral-icon {
  font-size: 28px;
  line-height: 1;
  flex-shrink: 0;
}
.auth-referral-body { flex: 1; min-width: 0; }
.auth-referral-title {
  font-size: 14px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  margin-bottom: 2px;
}
.auth-referral-sub {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.4;
}
.auth-field input {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  font-family: inherit;
  font-size: 16px;
  color: var(--text-primary);
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.auth-field input:focus {
  border-color: var(--tint);
  box-shadow: 0 0 0 3px rgba(255, 59, 48, 0.1);
}
.auth-field input::placeholder { color: var(--text-secondary); opacity: 0.6; }

.auth-error {
  background: color-mix(in srgb, var(--tint) 12%, var(--bg-card));
  color: var(--tint);
  border-left: 3px solid var(--tint);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 13px;
  line-height: 1.4;
  text-align: left;
}
.auth-error.hidden { display: none; }

.auth-submit {
  background: var(--tint);
  color: #fff;
  border: 0;
  border-radius: 12px;
  padding: 15px 20px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  margin-top: 4px;
  box-shadow: 0 4px 12px rgba(255, 59, 48, 0.2);
  position: relative;
}
.auth-submit:hover { filter: brightness(1.05); }
.auth-submit:active { transform: scale(0.98); }
.auth-submit:disabled, .auth-submit.loading {
  opacity: 0.6;
  cursor: not-allowed;
}
.auth-submit.loading::after {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255,255,255,0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: authSpin 0.6s linear infinite;
  margin-left: 8px;
  vertical-align: middle;
}
@keyframes authSpin { to { transform: rotate(360deg); } }

/* === Auth divider "ou" === */
.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 4px 0;
}
.auth-divider-line {
  flex: 1;
  height: 1px;
  background: var(--border);
}
.auth-divider-text {
  font-size: 12px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}

/* === Boutons OAuth (Google, Apple) === */
.auth-oauth {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  background: var(--bg-card);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 13px 20px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}
.auth-oauth:hover { background: var(--bg-elev); }
.auth-oauth:active { transform: scale(0.98); }
.auth-oauth:disabled, .auth-oauth.loading {
  opacity: 0.6;
  cursor: not-allowed;
}
.auth-oauth svg {
  flex-shrink: 0;
}
.auth-oauth-apple {
  /* Apple : design avec fond noir suivant les guidelines */
  background: #000;
  color: #fff;
  border-color: #000;
}
[data-theme="dark"] .auth-oauth-apple {
  background: #fff;
  color: #000;
  border-color: #fff;
}
.auth-oauth-apple:hover {
  background: #1a1a1a;
}
[data-theme="dark"] .auth-oauth-apple:hover {
  background: #f0f0f0;
}

.auth-forgot {
  background: transparent;
  border: 0;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  padding: 4px;
  align-self: center;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.auth-forgot:hover { color: var(--text-primary); }
.auth-forgot.hidden { display: none; }

.auth-switch {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--text-secondary);
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.auth-switch button {
  background: transparent;
  border: 0;
  color: var(--tint);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  padding: 4px 6px;
}
.auth-switch button:hover { text-decoration: underline; }

/* ============ SETTINGS — section Compte ============ */
/* ============ BOOT SPLASH ============ */
.boot-splash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--bg-page);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  transition: opacity 0.3s ease;
}
.boot-splash.hiding { opacity: 0; pointer-events: none; }
.boot-splash-logo {
  width: 96px;
  height: 96px;
  filter: drop-shadow(0 8px 24px rgba(255, 59, 48, 0.25));
  animation: bootLogoFloat 2s ease-in-out infinite;
}
@keyframes bootLogoFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
.boot-splash-spinner {
  width: 28px;
  height: 28px;
  border: 3px solid var(--bg-elev);
  border-top-color: var(--tint);
  border-radius: 50%;
  animation: bootSpin 0.7s linear infinite;
}
@keyframes bootSpin { to { transform: rotate(360deg); } }

/* ============ OFFLINE BANNER ============
   S'affiche en haut de la page quand la connexion tombe.
   Slide-down depuis le haut, contraste fort pour bien attirer l'attention. */
.offline-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9000;
  background: #3D3D3D;
  color: white;
  padding: 10px 16px calc(10px + env(safe-area-inset-top));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
  transform: translateY(-100%);
  transition: transform 0.3s cubic-bezier(0.34, 1.36, 0.64, 1);
  box-shadow: 0 2px 12px rgba(0,0,0,0.15);
}
.offline-banner:not(.hidden) {
  transform: translateY(0);
}
.offline-banner.hidden {
  pointer-events: none;
}
.offline-banner-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  opacity: 0.9;
}

/* ============ BOOT SKELETON ============
   Skeleton affiché juste après le boot splash pour éviter le flicker
   entre disparition du splash et apparition du contenu réel.
   Reproduit la structure approximative du header + cartes home. */
.boot-skeleton {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: var(--bg-page);
  padding: env(safe-area-inset-top) 20px 0;
  transition: opacity 0.25s ease;
}
.boot-skeleton.hiding {
  opacity: 0;
  pointer-events: none;
}
.boot-skel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  margin-bottom: 24px;
}
.boot-skel-bar {
  background: linear-gradient(90deg, var(--bg-elev) 0%, var(--bg-card) 50%, var(--bg-elev) 100%);
  background-size: 200% 100%;
  border-radius: 8px;
  animation: skelShimmer 1.4s ease-in-out infinite;
}
.boot-skel-circle {
  background: linear-gradient(90deg, var(--bg-elev) 0%, var(--bg-card) 50%, var(--bg-elev) 100%);
  background-size: 200% 100%;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  animation: skelShimmer 1.4s ease-in-out infinite;
}
.boot-skel-header-circles {
  display: flex;
  gap: 8px;
}
.boot-skel-greeting { width: 60%; height: 32px; margin-bottom: 10px; }
.boot-skel-date     { width: 35%; height: 14px; margin-bottom: 24px; }
.boot-skel-banner   { width: 100%; height: 76px; margin-bottom: 18px; border-radius: 14px; }
.boot-skel-card     { width: 100%; height: 92px; margin-bottom: 12px; border-radius: 14px; }
@keyframes skelShimmer {
  0%, 100% { background-position: 200% 0; }
  50% { background-position: -200% 0; }
}

/* ============ CATEGORY GROUPS ============ */
.cat-groups-row {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 10px 14px;
  margin: 0 0 12px;
  background: var(--bg-card);
  border-radius: 14px;
  box-shadow: var(--card-shadow);
  scrollbar-width: none;
}
.cat-groups-row::-webkit-scrollbar { display: none; }
.cat-group {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 99px;
  padding: 6px 12px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.15s ease;
}
.cat-group:hover { background: var(--bg-elev); color: var(--text-primary); }
.cat-group.active {
  background: var(--text-primary);
  color: var(--bg-card);
  border-color: var(--text-primary);
}
.cat-group-emoji { font-size: 14px; line-height: 1; }

/* ============ SESSION PROGRESS (Quiz) ============ */
.session-progress {
  background: var(--bg-card);
  border-radius: 14px;
  padding: 12px 16px;
  margin-bottom: 12px;
  border: 1px solid var(--border);
}
.session-progress-info {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
}
.session-progress-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.session-progress-val {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.session-progress-val span:first-child { color: var(--tint); }
.session-progress-track {
  height: 6px;
  background: var(--bg-elev);
  border-radius: 99px;
  overflow: hidden;
}
.session-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--tint), #FF6B5C);
  border-radius: 99px;
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  width: 0%;
}

/* ============ DAILY CARD interactive ============ */
.daily-card {
  background: var(--bg-card);
  border-radius: 18px;
  padding: 20px;
  border: 1px solid var(--border);
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  position: relative;
}
.daily-card .daily-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.daily-bonus {
  background: color-mix(in srgb, var(--tint) 14%, var(--bg-elev));
  color: var(--tint);
  padding: 2px 8px;
  border-radius: 99px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.daily-sq {
  font-size: clamp(20px, 4vw, 26px);
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}
.daily-phon-line {
  font-size: 13px;
  color: var(--text-secondary);
  font-style: italic;
  margin-bottom: 12px;
}
.daily-fr {
  font-size: 15px;
  color: var(--text-primary);
  font-weight: 500;
  margin-top: 8px;
}
.daily-audio-btn {
  position: absolute;
  top: 18px;
  right: 18px;
  background: var(--bg-elev);
  border: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.15s ease;
}
.daily-audio-btn svg { width: 16px; height: 16px; }
.daily-audio-btn:hover { background: var(--tint); color: #fff; }
.daily-audio-btn.playing { background: var(--tint); color: #fff; }

.daily-quiz-prompt {
  margin-top: 16px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.daily-quiz-choices {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}
.daily-quiz-choice {
  background: var(--bg-elev);
  border: 1.5px solid transparent;
  border-radius: 12px;
  padding: 12px 16px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
  transition: all 0.18s ease;
}
.daily-quiz-choice:hover:not(:disabled) {
  border-color: var(--tint);
  background: color-mix(in srgb, var(--tint) 6%, var(--bg-elev));
}
.daily-quiz-choice:disabled { cursor: default; }
.daily-quiz-choice.correct {
  background: color-mix(in srgb, var(--green) 18%, var(--bg-card));
  border-color: var(--green);
  color: var(--text-primary);
  font-weight: 700;
}
.daily-quiz-choice.wrong {
  background: color-mix(in srgb, var(--tint) 14%, var(--bg-card));
  border-color: var(--tint);
}
.daily-quiz-done {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: color-mix(in srgb, var(--green) 14%, var(--bg-elev));
  color: var(--green);
  border-radius: 99px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 700;
  margin-top: 12px;
}
.daily-quiz-done svg { width: 14px; height: 14px; }

/* ============ PROGRESS CTA ============ */
.progress-cta {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  background: linear-gradient(135deg, color-mix(in srgb, var(--tint) 12%, var(--bg-card)) 0%, var(--bg-card) 100%);
  border: 1px solid color-mix(in srgb, var(--tint) 22%, transparent);
  border-radius: 16px;
  padding: 14px 16px;
  margin-top: 12px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: all 0.18s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.progress-cta:hover {
  transform: translateY(-1px);
  border-color: var(--tint);
  box-shadow: 0 6px 20px rgba(255, 59, 48, 0.12);
}
.progress-cta-icon {
  font-size: 28px;
  line-height: 1;
  flex-shrink: 0;
}
.progress-cta-body { flex: 1; min-width: 0; }
.progress-cta-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}
.progress-cta-sub {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 2px;
}
.progress-cta-arrow {
  width: 18px;
  height: 18px;
  color: var(--tint);
  transition: transform 0.2s ease;
}
.progress-cta:hover .progress-cta-arrow { transform: translateX(4px); }
[data-theme="dark"] .progress-cta {
  background: linear-gradient(135deg, color-mix(in srgb, var(--tint) 20%, var(--bg-card)) 0%, var(--bg-card) 100%);
}

/* ============ PROGRESS OVERLAY ============ */
.progress-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 1100;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: chatSlideUp 0.22s ease;
}
.progress-overlay.hidden { display: none; }
.progress-modal {
  background: var(--bg-page);
  border-radius: 24px 24px 0 0;
  width: 100%;
  max-width: 600px;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 -10px 40px rgba(0,0,0,0.2);
}
@media (min-width: 700px) {
  .progress-overlay { align-items: center; padding: 24px; }
  .progress-modal { border-radius: 24px; max-height: 88vh; }
}
.progress-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 12px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.progress-modal-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 17px;
  font-weight: 700;
  color: var(--text-primary);
}
.progress-modal-icon { font-size: 22px; line-height: 1; }
.progress-modal-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px 20px;
  padding-bottom: max(20px, env(safe-area-inset-bottom, 0));
}

.progress-hero {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--bg-card);
  border-radius: 18px;
  padding: 18px;
  border: 1px solid var(--border);
}

/* Wrapper de la barre de progression vers le prochain niveau,
   affiché juste sous le hero dans Ma Progression (fusion ex-XP modal) */
.progress-next-level {
  margin-top: 14px;
  padding: 14px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
}
.progress-next-level-text {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 8px;
  line-height: 1.4;
  text-align: center;
}
.progress-next-level-text strong {
  color: var(--text-primary);
  font-weight: 700;
}
.progress-hero-icon {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--tint);
}
.progress-hero-icon svg { width: 100%; height: 100%; }
.progress-hero-info { flex: 1; min-width: 0; }
.progress-hero-level {
  font-size: 18px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}
.progress-hero-xp {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}

.progress-section-title {
  font-size: 11px;
  font-weight: 800;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin: 22px 0 10px;
}

.progress-sparkline-card {
  background: var(--bg-card);
  border-radius: 16px;
  padding: 18px;
  border: 1px solid var(--border);
}
.progress-sparkline-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 12px;
}
.progress-sparkline-big {
  font-size: 24px;
  font-weight: 800;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.progress-sparkline-sub {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 4px;
}
.progress-sparkline-trend {
  background: var(--bg-elev);
  color: var(--text-secondary);
  padding: 4px 10px;
  border-radius: 99px;
  font-size: 12px;
  font-weight: 700;
}
.progress-sparkline-trend.up {
  background: color-mix(in srgb, var(--green) 14%, var(--bg-elev));
  color: var(--green);
}
.progress-sparkline-trend.down {
  background: color-mix(in srgb, var(--tint) 14%, var(--bg-elev));
  color: var(--tint);
}
.progress-sparkline-svg {
  width: 100%;
  height: 80px;
  display: block;
}
.progress-sparkline-empty {
  text-align: center;
  padding: 28px 20px;
}
.progress-sparkline-empty .empty-emoji {
  font-size: 44px;
  margin-bottom: 10px;
}
.progress-sparkline-empty .empty-title {
  font-size: 16px;
  margin-bottom: 6px;
}
.progress-sparkline-empty .empty-text {
  font-size: 13px;
}

.progress-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
@media (max-width: 460px) {
  .progress-stats-grid { grid-template-columns: repeat(2, 1fr); }
}
.progress-stat-tile {
  background: var(--bg-card);
  border-radius: 14px;
  padding: 14px;
  border: 1px solid var(--border);
  text-align: center;
}
.progress-stat-val {
  font-size: 22px;
  font-weight: 800;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.progress-stat-lbl {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 4px;
  font-weight: 500;
}

.progress-cats {
  background: var(--bg-card);
  border-radius: 14px;
  padding: 4px 14px;
  border: 1px solid var(--border);
}
.progress-cat-row {
  padding: 12px 0;
  border-top: 1px solid var(--separator);
}
.progress-cat-row:first-child { border-top: 0; }
.progress-cat-info {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
}
.progress-cat-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}
.progress-cat-pct {
  font-size: 12px;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.progress-cat-track {
  height: 4px;
  background: var(--bg-elev);
  border-radius: 99px;
  overflow: hidden;
}
.progress-cat-fill {
  height: 100%;
  background: var(--tint);
  border-radius: 99px;
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.progress-empty {
  text-align: center;
  padding: 24px 16px;
  color: var(--text-secondary);
  font-size: 13px;
}

/* ============ SUCCESS BURST (particules) ============ */
.success-particle {
  position: fixed;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9000;
  animation: particleFly 0.65s cubic-bezier(0.2, 0.6, 0.3, 1) forwards;
  will-change: transform, opacity;
}
@keyframes particleFly {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0.3);
    opacity: 0;
  }
}

/* ============ ACHIEVEMENTS ============ */
.progress-badge-count {
  background: var(--bg-elev);
  color: var(--text-secondary);
  font-size: 10px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 99px;
  margin-left: 8px;
  letter-spacing: 0.02em;
  text-transform: none;
}
.achievements-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
@media (max-width: 460px) {
  .achievements-grid { grid-template-columns: 1fr; }
}
.achievement-tile {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px;
  transition: all 0.2s ease;
}
.achievement-tile.unlocked {
  border-color: color-mix(in srgb, var(--tint) 30%, var(--border));
  background: color-mix(in srgb, var(--tint) 4%, var(--bg-card));
}
.achievement-tile.locked {
  opacity: 0.55;
}
.achievement-emoji {
  font-size: 28px;
  line-height: 1;
  flex-shrink: 0;
  width: 38px;
  text-align: center;
}
.achievement-info { min-width: 0; flex: 1; }
.achievement-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.achievement-desc {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 2px;
  line-height: 1.3;
}

/* ============ TOOLTIPS ============ */
[data-tooltip] {
  position: relative;
}
[data-tooltip]:hover::after,
[data-tooltip]:focus::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.88);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  padding: 6px 10px;
  border-radius: 8px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 10000;
  animation: tooltipFadeIn 0.2s ease;
  max-width: 250px;
  white-space: normal;
  text-align: center;
  min-width: 120px;
}
@keyframes tooltipFadeIn {
  from { opacity: 0; transform: translateX(-50%) translateY(4px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
/* Tooltip en bas pour les éléments du header */
[data-tooltip-bottom]:hover::after,
[data-tooltip-bottom]:focus::after {
  content: attr(data-tooltip-bottom);
  position: absolute;
  top: calc(100% + 6px);
  bottom: auto;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.88);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  padding: 6px 10px;
  border-radius: 8px;
  pointer-events: none;
  z-index: 10000;
  animation: tooltipFadeIn 0.2s ease;
  max-width: 220px;
  white-space: normal;
  text-align: center;
  min-width: 100px;
}
/* Sur mobile, masquer les tooltips (pas de hover réel) */
@media (hover: none) {
  [data-tooltip]:hover::after, [data-tooltip-bottom]:hover::after { display: none; }
}

/* ============ SETTINGS ROW TOGGLE ============ */
.settings-row-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 26px;
  flex-shrink: 0;
}
.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background: var(--bg-pressed);
  border-radius: 99px;
  transition: 0.2s;
}
.toggle-slider::before {
  position: absolute;
  content: "";
  height: 22px;
  width: 22px;
  left: 2px;
  bottom: 2px;
  background: #fff;
  border-radius: 50%;
  transition: 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.toggle-switch input:checked + .toggle-slider {
  background: var(--green);
}
.toggle-switch input:checked + .toggle-slider::before {
  transform: translateX(18px);
}

/* ============ BOTTOM SHEET HANDLE (drag indicator iOS-like) ============ */
.bottom-sheet-handle {
  width: 40px;
  height: 5px;
  background: color-mix(in srgb, var(--text-primary) 25%, transparent);
  border-radius: 99px;
  margin: 0 auto;
  flex-shrink: 0;
  cursor: grab;
  position: relative;
  transition: background 0.15s ease;
}
.bottom-sheet-handle:hover {
  background: color-mix(in srgb, var(--text-primary) 40%, transparent);
}
.bottom-sheet-handle:active { cursor: grabbing; }
/* Wrapper visuel parent — espacement vertical avec zone touch étendue */
.missions-modal > .bottom-sheet-handle,
.search-modal > .bottom-sheet-handle,
.settings-modal-sheet > .bottom-sheet-handle,
.challenge-modal > .bottom-sheet-handle,
.progress-modal > .bottom-sheet-handle,
.xp-modal > .bottom-sheet-handle,
.recorder-modal > .bottom-sheet-handle,
.premium-modal-top > .bottom-sheet-handle {
  margin-top: 12px;
  margin-bottom: 8px;
  /* Zone tappable plus large via box-shadow invisible (sans déformer le visuel) */
  box-shadow: 0 0 0 18px transparent;
}

/* ============ DAILY CHALLENGE ============ */
.challenge-cta {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  background: linear-gradient(135deg, color-mix(in srgb, #FFB800 14%, var(--bg-card)) 0%, var(--bg-card) 100%);
  border: 1px solid color-mix(in srgb, #FFB800 22%, transparent);
  border-radius: 16px;
  padding: 14px 16px;
  margin-top: 10px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: all 0.18s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.challenge-cta:hover {
  transform: translateY(-1px);
  border-color: #FFB800;
  box-shadow: 0 6px 20px rgba(255, 184, 0, 0.15);
}
.challenge-cta.done {
  background: linear-gradient(135deg, color-mix(in srgb, var(--green) 12%, var(--bg-card)) 0%, var(--bg-card) 100%);
  border-color: color-mix(in srgb, var(--green) 22%, transparent);
}
.challenge-cta-icon {
  font-size: 28px;
  line-height: 1;
  flex-shrink: 0;
}
.challenge-cta-body { flex: 1; min-width: 0; }
.challenge-cta-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}
.challenge-cta-sub {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 2px;
}
.challenge-cta-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: #FFB800;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.challenge-cta.done .challenge-cta-status {
  color: var(--green);
}
.challenge-cta-status svg { width: 18px; height: 18px; }
.challenge-cta:hover .challenge-cta-status { transform: translateX(2px); }
[data-theme="dark"] .challenge-cta {
  background: linear-gradient(135deg, color-mix(in srgb, #FFB800 22%, var(--bg-card)) 0%, var(--bg-card) 100%);
}

/* Challenge overlay */
.challenge-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 1100;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: chatSlideUp 0.22s ease;
}
.challenge-overlay.hidden { display: none; }
.challenge-modal {
  background: var(--bg-page);
  border-radius: 24px 24px 0 0;
  width: 100%;
  max-width: 560px;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 -10px 40px rgba(0,0,0,0.2);
}
@media (min-width: 700px) {
  .challenge-overlay { align-items: center; padding: 24px; }
  .challenge-modal { border-radius: 24px; max-height: 88vh; }
}
.challenge-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px 12px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.challenge-modal-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 17px;
  font-weight: 700;
  color: var(--text-primary);
}
.challenge-modal-icon { font-size: 22px; line-height: 1; }
.challenge-modal-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 24px 24px;
  padding-bottom: max(28px, env(safe-area-inset-bottom, 0));
}

/* Question */
.challenge-progress-row {
  margin-bottom: 28px;
}
.challenge-progress-info {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
}
.challenge-progress-label {
  font-size: 11px;
  font-weight: 800;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.challenge-progress-val {
  font-size: 15px;
  font-weight: 700;
  color: var(--tint);
  font-variant-numeric: tabular-nums;
}
.challenge-progress-track {
  height: 6px;
  background: var(--bg-elev);
  border-radius: 99px;
  overflow: hidden;
}
.challenge-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #FFB800, var(--tint));
  border-radius: 99px;
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.challenge-prompt-label {
  font-size: 11px;
  font-weight: 800;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-align: center;
  margin-bottom: 14px;
}
.challenge-prompt {
  font-size: clamp(28px, 7vw, 40px);
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  text-align: center;
  line-height: 1.1;
  margin-bottom: 8px;
}
.challenge-prompt-hint {
  font-size: 15px;
  color: var(--text-secondary);
  font-style: italic;
  text-align: center;
  margin-bottom: 28px;
}

.challenge-choices {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 28px;
}
.challenge-choice {
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: 16px 18px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
  transition: all 0.18s ease;
}
@media (hover: hover) {
  .challenge-choice:hover:not(:disabled) {
    border-color: var(--tint);
    background: color-mix(in srgb, var(--tint) 5%, var(--bg-card));
    transform: translateY(-1px);
  }
}
.challenge-choice:disabled { cursor: default; }
.challenge-choice.correct {
  background: color-mix(in srgb, var(--green) 16%, var(--bg-card));
  border-color: var(--green);
  color: var(--text-primary);
  font-weight: 700;
}
.challenge-choice.wrong {
  background: color-mix(in srgb, var(--tint) 14%, var(--bg-card));
  border-color: var(--tint);
}

/* Résultat */
.challenge-result {
  text-align: center;
  padding: 24px 16px;
}
.challenge-result-emoji {
  font-size: 72px;
  line-height: 1;
  margin-bottom: 16px;
  animation: resultPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes resultPop {
  0% { transform: scale(0.3); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
.challenge-result-score-row {
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
}
.challenge-result-score {
  font-size: 56px;
  font-weight: 800;
  color: var(--tint);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.challenge-result-score-tot {
  font-size: 28px;
  color: var(--text-secondary);
  font-weight: 700;
}
.challenge-result-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}
.challenge-result-subtitle {
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 28px;
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.5;
}
.challenge-result-close {
  background: var(--tint);
  color: #fff;
  border: 0;
  border-radius: 14px;
  padding: 14px 32px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}
.challenge-result-close:hover { filter: brightness(1.05); transform: translateY(-1px); }

/* ============ LEADERBOARD ============ */
.leaderboard-overlay,
.lb-settings-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 1100;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: chatSlideUp 0.22s ease;
}
.leaderboard-overlay.hidden,
.lb-settings-overlay.hidden { display: none; }

/* [v169] Le modal Amis s'ouvre par-dessus le modal Profil (qui reste actif en dessous).
   z-index plus élevé pour garantir l'empilement même si DOM order changeait. */
#friendsOverlay { z-index: 1200; }
.leaderboard-modal,
.lb-settings-modal {
  background: var(--bg-page);
  border-radius: 24px 24px 0 0;
  width: 100%;
  max-width: 560px;
  height: 86vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  box-shadow: 0 -10px 40px rgba(0,0,0,0.2);
}

/* ============ FRIENDS (v160) ============ */
/* Bouton Profil (settings) : besoin de position:relative pour ancrer la pastille .friend-badge */
#settingsBtn { position: relative; overflow: visible; }
/* [v251] Bouton Classement : même besoin pour la pastille de duels */
#headerLeaderboardBtn { position: relative; overflow: visible; }
.friend-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: var(--tint);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  border-radius: 99px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  border: 2px solid var(--bg-page);
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
  z-index: 2;
  pointer-events: none;
}
.friends-tabs {
  display: flex;
  gap: 4px;
  padding: 12px 16px 14px;
  margin-top: 8px;
  border-bottom: 1px solid var(--bg-elev);
}
.friends-tab {
  flex: 1;
  padding: 10px 8px;
  background: transparent;
  border: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-secondary);
  font-family: inherit;
  cursor: pointer;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  position: relative;
}
.friends-tab.active {
  background: color-mix(in srgb, var(--tint) 10%, transparent);
  color: var(--tint);
}
.friends-tab-badge {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: var(--tint);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  border-radius: 99px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.friends-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px 24px;
}
.friends-pane.hidden { display: none; }
.friends-list { display: flex; flex-direction: column; gap: 6px; }
.friends-loading {
  padding: 40px 16px;
  text-align: center;
  color: var(--text-secondary);
  font-size: 13px;
}
.friends-empty {
  padding: 40px 24px 24px;
  text-align: center;
  color: var(--text-secondary);
}
.friends-empty-icon { font-size: 48px; margin-bottom: 8px; }
.friends-empty-title { font-size: 16px; font-weight: 700; color: var(--text-primary); margin-bottom: 6px; }
.friends-empty-sub { font-size: 13px; line-height: 1.5; }

.friend-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--bg-card);
  border-radius: 12px;
}
.friend-row-avatar {
  width: 40px; height: 40px;
  background: var(--bg-elev);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
}
.friend-row-body { flex: 1; min-width: 0; }
.friend-row-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.friend-row-stats {
  font-size: 12px;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.friend-row-stats .friend-stat-sep { margin: 0 6px; opacity: 0.5; }
.friend-row-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-shrink: 0;
}
.friend-action-btn {
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 700;
  border-radius: 99px;
  border: 0;
  cursor: pointer;
  font-family: inherit;
}
.friend-action-btn.primary {
  background: var(--tint);
  color: #fff;
}
.friend-action-btn.secondary {
  background: var(--bg-elev);
  color: var(--text-primary);
}
.friend-row-tag {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: 99px;
  flex-shrink: 0;
}
.friend-row-tag.sent {
  background: color-mix(in srgb, var(--text-secondary) 15%, transparent);
  color: var(--text-secondary);
}

/* Add block */
.friends-add-block {
  background: var(--bg-card);
  border-radius: 16px;
  padding: 16px;
}
.friends-add-label {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  margin-bottom: 8px;
}
.friends-add-row {
  display: flex;
  gap: 8px;
}
.friends-add-input {
  flex: 1;
  min-width: 0;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1.5px solid var(--bg-elev);
  background: var(--bg-page);
  color: var(--text-primary);
  font-size: 16px;
  font-weight: 700;
  font-family: -apple-system, monospace;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.friends-add-input:focus { outline: none; border-color: var(--tint); }
.friends-add-btn {
  padding: 0 18px;
  background: var(--tint);
  color: #fff;
  border: 0;
  border-radius: 10px;
  font-weight: 700;
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
  flex-shrink: 0;
}
.friends-add-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.friends-add-feedback {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.4;
}
.friends-add-feedback.success {
  background: color-mix(in srgb, var(--green) 15%, transparent);
  color: var(--green);
}
.friends-add-feedback.error {
  background: color-mix(in srgb, var(--tint) 12%, transparent);
  color: var(--tint);
}
.friends-add-hint {
  margin-top: 10px;
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.45;
}
.friends-my-code-block {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--bg-elev);
}
.friends-my-code-label {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  margin-bottom: 8px;
}
.friends-my-code-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.friends-my-code {
  flex: 1;
  padding: 12px 14px;
  background: var(--bg-page);
  border-radius: 10px;
  font-size: 18px;
  font-weight: 800;
  font-family: -apple-system, monospace;
  letter-spacing: 0.1em;
  text-align: center;
}
.friends-my-code-copy {
  padding: 12px 16px;
  background: var(--bg-elev);
  border: 0;
  border-radius: 10px;
  font-weight: 700;
  font-size: 13px;
  font-family: inherit;
  color: var(--text-primary);
  cursor: pointer;
  flex-shrink: 0;
}
@media (min-width: 700px) {
  .leaderboard-overlay,
  .lb-settings-overlay { align-items: center; padding: 24px; }
  .leaderboard-modal,
  .lb-settings-modal { border-radius: 24px; height: 80vh; max-height: 760px; }
}

.leaderboard-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 8px 20px 16px;
  gap: 12px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--separator);
}
.leaderboard-eyebrow {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  color: var(--tint);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: color-mix(in srgb, var(--tint) 12%, transparent);
  padding: 3px 8px;
  border-radius: 99px;
  margin-bottom: 6px;
}
.leaderboard-title {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 4px;
  color: var(--text-primary);
}
.leaderboard-sub {
  font-size: 12px;
  color: var(--text-secondary);
  margin: 0;
}

/* Ma carte (sticky en haut) */
.leaderboard-my-card {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 14px 16px 4px;
  padding: 12px 14px;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--tint) 10%, var(--bg-card)),
    color-mix(in srgb, var(--tint) 4%, var(--bg-card)));
  border: 1.5px solid color-mix(in srgb, var(--tint) 25%, transparent);
  border-radius: 16px;
  flex-shrink: 0;
}
.lb-my-rank {
  font-size: 22px;
  font-weight: 900;
  color: var(--tint);
  width: 48px;
  text-align: center;
  letter-spacing: -0.02em;
}
.lb-my-info {
  flex: 1;
  min-width: 0;
}
.lb-my-pseudo-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.lb-my-pseudo {
  font-size: 15px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}
.lb-my-tier-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: color-mix(in srgb, var(--tint) 14%, var(--bg-card));
  color: var(--tint);
  border: 1px solid color-mix(in srgb, var(--tint) 30%, transparent);
  flex-shrink: 0;
  white-space: nowrap;
}
.lb-my-tier-badge.tier-elite {
  background: linear-gradient(135deg, #FFB800 0%, #FF6B35 100%);
  color: white;
  border-color: transparent;
  box-shadow: 0 1px 4px rgba(255, 107, 53, 0.25);
}
.lb-my-tier-badge.tier-top10 {
  background: linear-gradient(135deg, #34C759 0%, #15803D 100%);
  color: white;
  border-color: transparent;
}
.lb-my-tier-badge.tier-top25 {
  background: color-mix(in srgb, #5AC8FA 18%, var(--bg-card));
  color: #0369A1;
  border-color: color-mix(in srgb, #5AC8FA 35%, transparent);
}
[data-theme="dark"] .lb-my-tier-badge.tier-top25 { color: #93C5FD; }
.lb-my-tier-badge.tier-active {
  background: color-mix(in srgb, var(--text-secondary) 12%, var(--bg-card));
  color: var(--text-secondary);
  border-color: var(--border);
}
.lb-my-sub {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 2px;
  font-weight: 600;
}
.lb-my-settings {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.15s ease;
}
.lb-my-settings:hover { color: var(--text-primary); transform: rotate(45deg); }
.lb-my-settings svg { width: 16px; height: 16px; }

.leaderboard-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 8px 16px 28px;
  padding-bottom: max(28px, env(safe-area-inset-bottom, 0));
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.leaderboard-loading,
.leaderboard-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-secondary);
  font-size: 14px;
}
.leaderboard-empty-emoji { font-size: 48px; margin-bottom: 12px; }

.lb-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  transition: all 0.15s ease;
}
.lb-row.is-me {
  background: color-mix(in srgb, var(--tint) 6%, var(--bg-card));
  border-color: color-mix(in srgb, var(--tint) 30%, transparent);
}
/* [v216] Lignes cliquables : feedback visuel + accessibilité focus.
   Active uniquement quand on n'est pas en mode amis (= ajout potentiel). */
.lb-row.is-clickable {
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.lb-row.is-clickable:hover {
  border-color: color-mix(in srgb, var(--tint) 40%, var(--border));
  transform: translateY(-1px);
}
.lb-row.is-clickable:active { transform: translateY(0); }
.lb-row.is-clickable:focus-visible {
  outline: 2px solid var(--tint);
  outline-offset: 2px;
}
.lb-row-rank {
  font-size: 15px;
  font-weight: 800;
  width: 36px;
  text-align: center;
  color: var(--text-secondary);
  letter-spacing: -0.01em;
  flex-shrink: 0;
}
.lb-row.is-top-1 .lb-row-rank { color: #FFB800; font-size: 22px; }
.lb-row.is-top-2 .lb-row-rank { color: #A0A0A8; font-size: 20px; }
.lb-row.is-top-3 .lb-row-rank { color: #CD7F32; font-size: 18px; }
.lb-row-pseudo {
  flex: 1;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lb-row.is-me .lb-row-pseudo::after {
  content: "Toi";
  display: inline-block;
  font-size: 9px;
  font-weight: 800;
  background: var(--tint);
  color: #fff;
  padding: 2px 7px;
  border-radius: 99px;
  margin-left: 6px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: middle;
}
.lb-row-xp {
  font-size: 14px;
  font-weight: 800;
  color: var(--tint);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

/* Settings classement */
.lb-settings-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 20px 14px;
  gap: 12px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--separator);
}
.lb-settings-title {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--text-primary);
}
.lb-settings-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 16px 16px 28px;
  padding-bottom: max(28px, env(safe-area-inset-bottom, 0));
}
.lb-pseudo-input {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  background: var(--bg-page);
  outline: none;
  transition: border-color 0.15s ease;
  box-sizing: border-box;
}
.lb-pseudo-input:focus { border-color: var(--tint); }
.lb-pseudo-error {
  margin-top: 8px;
  font-size: 12px;
  color: var(--tint);
  font-weight: 600;
  min-height: 16px;
}
.lb-pseudo-save {
  width: 100%;
  margin-top: 8px;
  background: var(--tint);
  color: #fff;
  border: 0;
  border-radius: 12px;
  padding: 12px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}
.lb-pseudo-save:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.05); }
.lb-pseudo-save:disabled { opacity: 0.5; cursor: wait; }
/* [v173] Toggle pills filter leaderboard (Tout le monde / Mes amis) */
.lb-filter-row {
  display: flex;
  gap: 6px;
  padding: 12px 16px 0;
  flex-shrink: 0;
}
/* [v254] Panes du classement (Classement | Duels) : remplissent la hauteur.
   Le pane ranking garde son layout (liste flex:1 qui scrolle). Le pane duels
   scrolle lui-même avec le même padding horizontal que les autres pages. */
.lb-pane {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.lb-pane[data-lb-pane="duels"] {
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 12px 16px 24px;
  padding-bottom: max(24px, env(safe-area-inset-bottom));
}
.lb-filter-pill {
  flex: 1;
  background: var(--bg-elev);
  border: 0;
  border-radius: 99px;
  padding: 9px 14px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.lb-filter-pill:hover { background: color-mix(in srgb, var(--bg-elev) 70%, var(--bg-card)); }
.lb-filter-pill.active {
  background: var(--tint);
  color: #fff;
}

/* [v173] Pseudo dans le modal Profil (input + bouton inline) */
.settings-sublabel {
  font-size: 11px;
  color: var(--text-secondary);
  margin: 14px 4px 6px;
  letter-spacing: -0.01em;
}
.profile-pseudo-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.profile-pseudo-input {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  background: var(--bg-page);
  outline: none;
  transition: border-color 0.15s ease;
  box-sizing: border-box;
}
.profile-pseudo-input:focus { border-color: var(--tint); }
.profile-pseudo-save {
  background: var(--tint);
  color: #fff;
  border: 0;
  border-radius: 10px;
  padding: 0 16px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
  flex-shrink: 0;
}
.profile-pseudo-save:hover:not(:disabled) { filter: brightness(1.05); }
.profile-pseudo-save:disabled { opacity: 0.5; cursor: wait; }
.profile-pseudo-error {
  margin-top: 6px;
  font-size: 12px;
  color: var(--tint);
  font-weight: 600;
}
.profile-pseudo-error.success { color: var(--green); }
.lb-toggle {
  width: 48px;
  height: 28px;
  appearance: none;
  -webkit-appearance: none;
  background: var(--bg-elev);
  border-radius: 99px;
  position: relative;
  cursor: pointer;
  transition: background 0.2s ease;
  flex-shrink: 0;
}
.lb-toggle::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.lb-toggle:checked { background: var(--green); }
.lb-toggle:checked::after { transform: translateX(20px); }

/* ============ MISSIONS (Shqip+) ============ */

/* Entry banner sur l'écran Discuter */
.missions-entry-banner {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--tint) 12%, var(--bg-card)),
    color-mix(in srgb, #FFB800 8%, var(--bg-card)));
  border: 1px solid color-mix(in srgb, var(--tint) 25%, transparent);
  border-radius: 16px;
  padding: 12px 14px;
  margin-bottom: 14px;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: all 0.15s ease;
}
.missions-entry-banner:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(255, 59, 48, 0.12);
}
.missions-entry-icon {
  font-size: 28px;
  line-height: 1;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-card);
  border-radius: 12px;
}
.missions-entry-body { flex: 1; min-width: 0; }
.missions-entry-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 2px;
}
.missions-entry-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}
.missions-entry-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 800;
  color: #fff;
  background: var(--tint);
  padding: 2px 7px;
  border-radius: 99px;
  letter-spacing: 0.04em;
}
.missions-entry-sub {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.3;
}
.missions-entry-arrow {
  width: 18px;
  height: 18px;
  color: var(--text-secondary);
  flex-shrink: 0;
}

/* ============ MISSIONS (Shqip+) ============ */
.missions-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 1100;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: chatSlideUp 0.22s ease;
}
.missions-overlay.hidden { display: none; }
.missions-modal {
  background: var(--bg-page);
  border-radius: 24px 24px 0 0;
  width: 100%;
  max-width: 620px;
  height: 92vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 -10px 40px rgba(0,0,0,0.2);
  position: relative;
}
@media (min-width: 700px) {
  .missions-overlay { align-items: center; padding: 24px; }
  .missions-modal { border-radius: 24px; height: 88vh; max-height: 880px; }
}

/* Vue Liste */
.missions-list-view {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.missions-list-view.hidden { display: none; }

.missions-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 8px 20px 16px;
  gap: 12px;
  flex-shrink: 0;
}
.missions-eyebrow {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  color: var(--tint);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 6px;
  background: color-mix(in srgb, var(--tint) 12%, transparent);
  padding: 3px 8px;
  border-radius: 99px;
}
.missions-title {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 4px;
  color: var(--text-primary);
}
.missions-sub {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.4;
  max-width: 420px;
}

.missions-cat-scroller {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 4px 20px 12px;
  scrollbar-width: none;
  flex-shrink: 0;
}
.missions-cat-scroller::-webkit-scrollbar { display: none; }
.missions-cat-chip {
  flex-shrink: 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 99px;
  padding: 7px 14px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.15s ease;
}
.missions-cat-chip:hover { color: var(--text-primary); }
.missions-cat-chip.active {
  background: var(--text-primary);
  color: var(--bg-card);
  border-color: var(--text-primary);
}

.missions-list {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 0 20px 28px;
  padding-bottom: max(28px, env(safe-area-inset-bottom, 0));
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mission-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: left;
  font-family: inherit;
}
.mission-card:hover:not(:disabled) {
  border-color: var(--tint);
  transform: translateX(2px);
}
.mission-card.locked {
  opacity: 0.7;
  cursor: pointer;
}
.mission-card.completed {
  background: color-mix(in srgb, var(--green) 8%, var(--bg-card));
  border-color: color-mix(in srgb, var(--green) 25%, var(--border));
}
.mission-card-icon {
  font-size: 32px;
  line-height: 1;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-elev);
  border-radius: 12px;
}
.mission-card-body { flex: 1; min-width: 0; }
.mission-card-top {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 3px;
  flex-wrap: wrap;
}
.mission-card-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}
.mission-card-diff {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: 99px;
}
.mission-card-diff.easy   { background: color-mix(in srgb, var(--green) 18%, transparent); color: var(--green); }
.mission-card-diff.medium { background: rgba(255, 184, 0, 0.18); color: #B8860B; }
.mission-card-diff.hard   { background: color-mix(in srgb, var(--tint) 18%, transparent); color: var(--tint); }
[data-theme="dark"] .mission-card-diff.medium { color: #FFD700; }
.mission-card-free-badge {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: 99px;
  background: linear-gradient(135deg, #34C759, #2EA84B);
  color: #fff;
  white-space: nowrap;
}
.mission-card.locked {
  opacity: 0.65;
  position: relative;
}
.mission-card.locked .mission-card-icon {
  filter: grayscale(0.5);
}
.mission-card-lock {
  font-size: 22px;
  flex-shrink: 0;
  margin-left: 8px;
  align-self: center;
  opacity: 0.65;
}
.mission-card-ctx {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.4;
  margin-bottom: 6px;
}
.mission-card-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
}
.mission-card-meta-item { display: inline-flex; align-items: center; gap: 4px; }
.mission-card-arrow {
  color: var(--text-secondary);
  flex-shrink: 0;
}
.mission-card-arrow svg { width: 18px; height: 18px; }
.mission-card-lock {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--tint) 12%, transparent);
  color: var(--tint);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.mission-card-lock svg { width: 14px; height: 14px; }

/* Vue Active */
.missions-active-view {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.missions-active-view.hidden { display: none; }

.missions-active-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px 12px;
  border-bottom: 1px solid var(--separator);
  flex-shrink: 0;
}
.missions-back-btn {
  background: transparent;
  border: 0;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-primary);
  cursor: pointer;
  flex-shrink: 0;
}
.missions-back-btn:hover { background: var(--bg-elev); }
.missions-back-btn svg { width: 22px; height: 22px; }
.missions-active-title-row {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.missions-active-icon {
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
}
.missions-active-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.missions-active-ctx {
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.3;
  margin-top: 2px;
}

/* Checklist objectives */
.missions-objectives {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 16px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--separator);
  flex-shrink: 0;
  max-height: 140px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.mission-obj-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--text-primary);
  transition: opacity 0.3s ease;
}
.mission-obj-row.done .mission-obj-label {
  color: var(--green);
  text-decoration: line-through;
  opacity: 0.7;
}
.mission-obj-check {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  background: transparent;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  transition: all 0.3s ease;
}
.mission-obj-row.done .mission-obj-check {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
  animation: missionCheck 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.mission-obj-check svg { width: 11px; height: 11px; }
@keyframes missionCheck {
  0% { transform: scale(0.6); }
  60% { transform: scale(1.2); }
  100% { transform: scale(1); }
}
.mission-obj-label { font-weight: 600; }

/* Chat dans la mission */
.missions-chat {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mission-msg {
  max-width: 85%;
  padding: 10px 14px;
  border-radius: 18px;
  font-size: 14px;
  line-height: 1.45;
  animation: missionMsgIn 0.3s ease;
}
@keyframes missionMsgIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.mission-msg-sam {
  align-self: flex-start;
  background: var(--bg-card);
  color: var(--text-primary);
  border-bottom-left-radius: 6px;
  border: 1px solid var(--border);
}
.mission-msg-sam-fr {
  align-self: flex-start;
  margin-top: -4px;
  margin-left: 14px;
  font-size: 12px;
  font-style: italic;
  color: var(--text-secondary);
  padding: 0 4px;
  max-width: 85%;
}
.mission-msg-user {
  align-self: flex-end;
  background: var(--tint);
  color: #fff;
  border-bottom-right-radius: 6px;
}
.mission-msg-typing {
  align-self: flex-start;
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: 12px 16px;
  border-radius: 18px;
  border-bottom-left-radius: 6px;
  display: inline-flex;
  gap: 4px;
}
.mission-msg-typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-secondary);
  animation: missionTyping 1.2s infinite;
}
.mission-msg-typing span:nth-child(2) { animation-delay: 0.2s; }
.mission-msg-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes missionTyping {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30%           { transform: translateY(-4px); opacity: 1; }
}

/* Input */
.missions-input-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 10px 12px;
  padding-bottom: max(10px, env(safe-area-inset-bottom, 0));
  background: var(--bg-card);
  border-top: 1px solid var(--separator);
  flex-shrink: 0;
}
.missions-input {
  flex: 1;
  resize: none;
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 10px 14px;
  font-family: inherit;
  font-size: 14px;
  background: var(--bg-page);
  color: var(--text-primary);
  outline: none;
  max-height: 100px;
  transition: border-color 0.15s ease;
}
.missions-input:focus { border-color: var(--tint); }
.missions-send {
  background: var(--tint);
  border: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.15s ease;
}
.missions-send:hover:not(:disabled) { transform: scale(1.05); }
.missions-send:disabled { opacity: 0.4; cursor: not-allowed; }
.missions-send svg { width: 18px; height: 18px; }

/* Vue Recap */
.missions-recap-view {
  flex: 1;
  position: relative;
  padding: 40px 28px 28px;
  text-align: center;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.missions-recap-view.hidden { display: none; }

.missions-recap-confetti {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.missions-recap-confetti span {
  position: absolute;
  top: -20px;
  width: 8px;
  height: 12px;
  border-radius: 1px;
  opacity: 0;
  animation: confettiFall 2.5s ease-in forwards;
}
.missions-recap-confetti span:nth-child(1)  { left: 10%; background: #FF3B30; animation-delay: 0.1s; }
.missions-recap-confetti span:nth-child(2)  { left: 22%; background: #FFB800; animation-delay: 0.3s; }
.missions-recap-confetti span:nth-child(3)  { left: 34%; background: #34C759; animation-delay: 0.5s; }
.missions-recap-confetti span:nth-child(4)  { left: 46%; background: #5AC8FA; animation-delay: 0.15s; }
.missions-recap-confetti span:nth-child(5)  { left: 58%; background: #AF52DE; animation-delay: 0.4s; }
.missions-recap-confetti span:nth-child(6)  { left: 70%; background: #FF3B30; animation-delay: 0.25s; }
.missions-recap-confetti span:nth-child(7)  { left: 82%; background: #FFB800; animation-delay: 0.55s; }
.missions-recap-confetti span:nth-child(8)  { left: 94%; background: #34C759; animation-delay: 0.2s; }
.missions-recap-confetti span:nth-child(9)  { left: 16%; background: #5AC8FA; animation-delay: 0.7s; }
.missions-recap-confetti span:nth-child(10) { left: 50%; background: #AF52DE; animation-delay: 0.8s; }

.missions-recap-icon {
  font-size: 72px;
  line-height: 1;
  margin-bottom: 16px;
  animation: iconBounce 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s both;
}
.missions-recap-status {
  font-size: 11px;
  font-weight: 800;
  color: var(--green);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.missions-recap-status.partial { color: #B8860B; }
[data-theme="dark"] .missions-recap-status.partial { color: #FFD700; }
.missions-recap-title {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
  color: var(--text-primary);
}
.missions-recap-score {
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 24px;
}
.missions-recap-xp {
  display: inline-block;
  background: var(--green);
  color: #fff;
  padding: 8px 22px;
  border-radius: 99px;
  font-size: 16px;
  font-weight: 800;
  margin-bottom: 32px;
  letter-spacing: 0.02em;
}
.missions-recap-buttons {
  width: 100%;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.missions-recap-cta-primary {
  width: 100%;
  background: var(--tint);
  color: #fff;
  border: 0;
  border-radius: 14px;
  padding: 14px 18px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}
.missions-recap-cta-primary:hover { transform: translateY(-1px); filter: brightness(1.05); }
.missions-recap-cta-secondary {
  width: 100%;
  background: transparent;
  border: 0;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 10px;
  cursor: pointer;
}
.missions-recap-cta-secondary:hover { color: var(--text-primary); }

/* ============ SHQIP+ WELCOME (post-Stripe) ============ */
.welcome-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: welcomeFadeIn 0.4s ease;
}
.welcome-overlay.hidden { display: none; }
@keyframes welcomeFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.welcome-modal {
  position: relative;
  background: var(--bg-card);
  border-radius: 24px;
  padding: 32px 24px 24px;
  max-width: 440px;
  width: 100%;
  text-align: center;
  overflow: hidden;
  box-shadow: 0 25px 80px rgba(0,0,0,0.3);
  animation: welcomeScaleIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes welcomeScaleIn {
  from { opacity: 0; transform: translateY(20px) scale(0.92); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Confettis */
.welcome-confetti {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.welcome-confetti span {
  position: absolute;
  top: -20px;
  width: 8px;
  height: 12px;
  border-radius: 1px;
  opacity: 0;
  animation: confettiFall 2.5s ease-in forwards;
}
.welcome-confetti span:nth-child(1)  { left: 6%;  background: #FF3B30; animation-delay: 0.1s; }
.welcome-confetti span:nth-child(2)  { left: 14%; background: #FFB800; animation-delay: 0.3s; }
.welcome-confetti span:nth-child(3)  { left: 22%; background: #34C759; animation-delay: 0.5s; }
.welcome-confetti span:nth-child(4)  { left: 30%; background: #5AC8FA; animation-delay: 0.15s; }
.welcome-confetti span:nth-child(5)  { left: 38%; background: #AF52DE; animation-delay: 0.4s; }
.welcome-confetti span:nth-child(6)  { left: 46%; background: #FF3B30; animation-delay: 0.25s; }
.welcome-confetti span:nth-child(7)  { left: 54%; background: #FFB800; animation-delay: 0.55s; }
.welcome-confetti span:nth-child(8)  { left: 62%; background: #34C759; animation-delay: 0.2s; }
.welcome-confetti span:nth-child(9)  { left: 70%; background: #5AC8FA; animation-delay: 0.45s; }
.welcome-confetti span:nth-child(10) { left: 78%; background: #AF52DE; animation-delay: 0.35s; }
.welcome-confetti span:nth-child(11) { left: 86%; background: #FF3B30; animation-delay: 0.6s; }
.welcome-confetti span:nth-child(12) { left: 94%; background: #FFB800; animation-delay: 0.1s; }
.welcome-confetti span:nth-child(13) { left: 18%; background: #34C759; animation-delay: 0.7s; }
.welcome-confetti span:nth-child(14) { left: 50%; background: #5AC8FA; animation-delay: 0.8s; }
.welcome-confetti span:nth-child(15) { left: 82%; background: #AF52DE; animation-delay: 0.65s; }
@keyframes confettiFall {
  0%   { opacity: 0; transform: translateY(0) rotate(0deg); }
  10%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(500px) rotate(720deg); }
}

.welcome-icon {
  font-size: 64px;
  line-height: 1;
  margin-bottom: 14px;
  animation: iconBounce 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s both;
  display: inline-block;
}
@keyframes iconBounce {
  0%   { opacity: 0; transform: scale(0) rotate(-30deg); }
  60%  { opacity: 1; transform: scale(1.15) rotate(5deg); }
  100% { transform: scale(1) rotate(0); }
}

.welcome-status {
  font-size: 11px;
  font-weight: 800;
  color: var(--green);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.welcome-status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  animation: pulseGreen 1.5s ease-in-out infinite;
}
.welcome-status.is-confirmed {
  color: var(--green);
}
.welcome-status.is-confirmed::before {
  animation: none;
}
@keyframes pulseGreen {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50%      { opacity: 1; transform: scale(1.3); }
}

.welcome-title {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin: 0 0 10px;
  line-height: 1.15;
}
.welcome-sub {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0 0 22px;
}

.welcome-features {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 24px;
  text-align: left;
}
.welcome-feature {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg-elev);
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}
.welcome-feature-icon {
  font-size: 18px;
  flex-shrink: 0;
}

.welcome-cta-primary {
  width: 100%;
  background: var(--tint);
  color: #fff;
  border: 0;
  border-radius: 14px;
  padding: 14px 18px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 8px;
  transition: all 0.15s ease;
  box-shadow: 0 4px 14px rgba(255, 59, 48, 0.25);
}
.welcome-cta-primary:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow: 0 6px 18px rgba(255, 59, 48, 0.35);
}
.welcome-cta-primary svg { width: 16px; height: 16px; }
.welcome-cta-secondary {
  width: 100%;
  background: transparent;
  border: 0;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 10px;
  cursor: pointer;
  transition: color 0.15s ease;
}
.welcome-cta-secondary:hover { color: var(--text-primary); }

/* ============ PREMIUM ============ */

/* Header button (à côté de Search) */
.header-premium-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, color-mix(in srgb, #FFB800 18%, var(--bg-card)) 0%, color-mix(in srgb, var(--tint) 14%, var(--bg-card)) 100%);
  border: 1px solid color-mix(in srgb, #FFB800 30%, transparent);
  cursor: pointer;
  flex-shrink: 0;
  font-family: inherit;
  padding: 0;
  transition: all 0.18s ease;
  position: relative;
  animation: premiumPulse 2.4s ease-in-out infinite;
}
@keyframes premiumPulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, #FFB800 30%, transparent); }
  50% { box-shadow: 0 0 0 6px color-mix(in srgb, #FFB800 0%, transparent); }
}
.header-premium-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.1);
}
.header-premium-btn.hidden { display: none !important; }
.header-premium-icon {
  font-size: 18px;
  line-height: 1;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.15));
}

/* État Premium actif : vert stable, plus de pulse */
.header-premium-btn.premium-active {
  background: linear-gradient(135deg, color-mix(in srgb, var(--green) 22%, var(--bg-card)) 0%, color-mix(in srgb, var(--green) 14%, var(--bg-card)) 100%);
  border-color: color-mix(in srgb, var(--green) 40%, transparent);
  animation: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--green) 14%, transparent);
}
.header-premium-btn.premium-active:hover {
  filter: brightness(1.05);
}

/* Home CTA (sur Aujourd'hui) */
.home-premium-cta {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  background: linear-gradient(135deg, color-mix(in srgb, #FFB800 14%, var(--bg-card)) 0%, color-mix(in srgb, var(--tint) 10%, var(--bg-card)) 100%);
  border: 1px solid color-mix(in srgb, #FFB800 22%, transparent);
  border-radius: 16px;
  padding: 14px 16px;
  margin-top: 10px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: all 0.18s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.home-premium-cta:hover {
  transform: translateY(-1px);
  border-color: #FFB800;
  box-shadow: 0 6px 20px rgba(255, 184, 0, 0.18);
}
.home-premium-cta.hidden { display: none !important; }
.home-premium-cta.premium-active {
  background: linear-gradient(135deg, color-mix(in srgb, var(--green) 14%, var(--bg-card)) 0%, var(--bg-card) 100%);
  border-color: color-mix(in srgb, var(--green) 30%, transparent);
}
.home-premium-icon {
  font-size: 28px;
  line-height: 1;
  flex-shrink: 0;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.1));
}
.home-premium-body { flex: 1; min-width: 0; }
.home-premium-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}
.home-premium-sub {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 2px;
  line-height: 1.3;
}
.home-premium-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: #B8860B;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
[data-theme="dark"] .home-premium-arrow { color: #FFD700; }
.home-premium-cta.premium-active .home-premium-arrow { color: var(--green); }
.home-premium-arrow svg { width: 16px; height: 16px; }
.home-premium-cta:hover .home-premium-arrow { transform: translateX(2px); }
[data-theme="dark"] .home-premium-cta {
  background: linear-gradient(135deg, color-mix(in srgb, #FFB800 22%, var(--bg-card)) 0%, color-mix(in srgb, var(--tint) 16%, var(--bg-card)) 100%);
}

/* Overlay */
.premium-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 1100;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: chatSlideUp 0.22s ease;
}
.premium-overlay.hidden { display: none; }
.premium-modal {
  background: var(--bg-page);
  border-radius: 24px 24px 0 0;
  width: 100%;
  max-width: 560px;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 -10px 40px rgba(0,0,0,0.2);
  position: relative;
}
@media (min-width: 700px) {
  .premium-overlay { align-items: center; padding: 24px; }
  .premium-modal { border-radius: 24px; max-height: 88vh; }
}
.premium-modal-top {
  position: relative;
  flex-shrink: 0;
  min-height: 28px;
  padding-bottom: 4px;
  cursor: grab;
}
.premium-modal-top:active { cursor: grabbing; }
.premium-close {
  position: absolute;
  top: 14px;
  right: 14px;
  background: var(--bg-elev);
  border: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-primary);
  z-index: 1;
  transition: all 0.15s ease;
}
.premium-close svg { width: 16px; height: 16px; }
.premium-close:hover { background: var(--bg-pressed); }
.premium-modal-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px 20px 24px;
  padding-bottom: max(28px, env(safe-area-inset-bottom, 0));
}

/* Hero */
.premium-hero {
  text-align: center;
  padding: 24px 16px 28px;
}
.premium-hero-icon {
  font-size: 56px;
  line-height: 1;
  margin-bottom: 12px;
  animation: emptyFloat 3s ease-in-out infinite;
}
.premium-hero-title {
  font-size: 26px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, var(--tint), #FFB800);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.premium-hero-sub {
  font-size: 14px;
  color: var(--text-secondary);
  margin-top: 6px;
}
.premium-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  padding: 6px 14px;
  border-radius: 99px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.beta-badge {
  background: color-mix(in srgb, #FFB800 20%, var(--bg-card));
  color: #B8860B;
  border: 1px solid color-mix(in srgb, #FFB800 30%, transparent);
}
[data-theme="dark"] .beta-badge { color: #FFD700; }
.active-badge {
  background: color-mix(in srgb, var(--green) 18%, var(--bg-card));
  color: var(--green);
  border: 1px solid color-mix(in srgb, var(--green) 30%, transparent);
}
.free-badge {
  background: var(--bg-elev);
  color: var(--text-secondary);
}

/* Features */
.premium-features {
  background: var(--bg-card);
  border-radius: 14px;
  padding: 4px 14px;
  border: 1px solid var(--border);
  margin: 14px 0;
}
.premium-feature {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--separator);
  position: relative;
}
.premium-feature:first-child { border-top: 0; }

/* Feature mise en avant : background coloré + bord */
.premium-feature-highlight {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--tint) 8%, var(--bg-card)),
    color-mix(in srgb, #FFB800 6%, var(--bg-card)));
  border: 1.5px solid color-mix(in srgb, var(--tint) 30%, transparent);
  border-radius: 12px;
  padding: 12px 14px !important;
  margin-bottom: 4px;
  margin-top: 2px;
}
.premium-feature-highlight:first-child { border-top: 1.5px solid color-mix(in srgb, var(--tint) 30%, transparent); }
/* Le feature qui suit le highlight ne doit pas avoir de border-top fantôme */
.premium-feature-highlight + .premium-feature { border-top: 0; padding-top: 6px; }

.premium-feature-star {
  position: absolute;
  top: -8px;
  right: 10px;
  font-size: 14px;
  background: var(--tint);
  color: #fff;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(255, 59, 48, 0.3);
}
.premium-feature-new {
  display: inline-flex;
  align-items: center;
  background: var(--tint);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 99px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.premium-feature-icon {
  font-size: 20px;
  line-height: 1;
  flex-shrink: 0;
  width: 28px;
  text-align: center;
}
.premium-feature-body { flex: 1; min-width: 0; }
.premium-feature-title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.3;
  margin-bottom: 2px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.premium-feature-soon {
  display: inline-flex;
  align-items: center;
  background: color-mix(in srgb, #FFB800 18%, transparent);
  color: #B8860B;
  font-size: 9px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 99px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
[data-theme="dark"] .premium-feature-soon { color: #FFD700; }
.premium-feature-desc {
  font-size: 12.5px;
  color: var(--text-secondary);
  line-height: 1.4;
}

/* Pricing */
.premium-pricing {
  background: var(--bg-card);
  border-radius: 16px;
  padding: 18px;
  border: 1px solid var(--border);
  margin: 20px 0 12px;
}
.premium-plans {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 16px;
}
.premium-plan {
  position: relative;
  background: var(--bg-elev);
  border: 2px solid transparent;
  border-radius: 14px;
  padding: 14px 12px 12px;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.18s ease;
  text-align: center;
}
.premium-plan.selected {
  border-color: var(--tint);
  background: color-mix(in srgb, var(--tint) 8%, var(--bg-elev));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--tint) 10%, transparent);
}
.premium-plan:hover {
  transform: translateY(-1px);
  border-color: var(--tint);
}

/* Bouton gérer abonnement */
.premium-manage {
  margin: 16px 0 8px;
}
.premium-manage-btn {
  width: 100%;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px 16px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.15s ease;
}
.premium-manage-btn:hover { background: var(--bg-pressed); border-color: var(--tint); }
.premium-manage-btn:disabled { opacity: 0.5; cursor: wait; }
.premium-plan-best {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--tint);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 99px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.premium-plan-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}
.premium-plan-price {
  font-size: 28px;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.premium-plan-period {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 2px;
}
.premium-plan-saving {
  font-size: 11px;
  font-weight: 700;
  color: var(--tint);
  margin-top: 6px;
}
.premium-cta-btn {
  width: 100%;
  background: linear-gradient(135deg, var(--tint), #FFB800);
  color: #fff;
  border: 0;
  border-radius: 14px;
  padding: 14px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  letter-spacing: 0.01em;
  transition: all 0.15s ease;
  box-shadow: 0 4px 14px rgba(255, 59, 48, 0.25);
}
.premium-cta-btn:hover { transform: translateY(-1px); filter: brightness(1.04); }
.premium-cta-btn svg { width: 16px; height: 16px; }
.premium-fine-print {
  text-align: center;
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 12px;
}

/* === Badge essai gratuit dans le hero === */
.premium-trial-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 10px 16px;
  background: linear-gradient(135deg,
    color-mix(in srgb, #34C759 18%, var(--bg-card)),
    color-mix(in srgb, #34C759 6%, var(--bg-card))
  );
  border: 1px solid color-mix(in srgb, #34C759 35%, transparent);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: #1d1d1f;
  line-height: 1.3;
}
.premium-trial-badge-emoji {
  font-size: 18px;
  line-height: 1;
}
.premium-trial-badge strong {
  color: #15803D;
  font-weight: 800;
}
[data-theme="dark"] .premium-trial-badge { color: var(--text-primary); }
[data-theme="dark"] .premium-trial-badge strong { color: #6EE7B7; }

/* === Prix barré + équivalent mensuel sur l'annuel === */
.premium-plan-price-row {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}
.premium-plan-crossed {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
  text-decoration: line-through;
  text-decoration-color: color-mix(in srgb, var(--tint) 60%, transparent);
  text-decoration-thickness: 2px;
  opacity: 0.7;
}
.premium-plan-equiv {
  font-size: 11px;
  font-weight: 600;
  color: var(--tint);
  margin-top: 6px;
  letter-spacing: 0.01em;
}

/* [v223] Hint TWA Android : caché par défaut, visible uniquement quand
   <html data-android-twa="true"> est posé (= app installée depuis Play Store).
   On évite ainsi de polluer l'UI web normale avec un message qui ne concerne
   pas les users navigateur. */
.premium-twa-hint {
  display: none;
  margin-top: 14px;
  padding: 12px 14px;
  background: color-mix(in srgb, var(--tint) 8%, var(--bg-card));
  border: 1px solid color-mix(in srgb, var(--tint) 30%, var(--border));
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-primary);
}
[data-android-twa="true"] .premium-twa-hint {
  display: block;
}
/* Sur Android TWA, le bouton subscribe change de label visuel pour matcher
   l'action réelle (ouvrir le navigateur, pas démarrer un essai) */
[data-android-twa="true"] .premium-cta-btn span::after {
  content: " → web";
  opacity: 0.7;
  font-weight: 500;
}

/* === Section réassurance === */
.premium-reassurance {
  margin-top: 14px;
  padding: 14px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.premium-reassurance-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-primary);
}
.premium-reassurance-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #34C759;
  color: white;
  font-size: 11px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}
.premium-reassurance-row strong { font-weight: 700; }

/* === FAQ accordéon === */
.premium-faq {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.premium-faq-item {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  transition: background 0.15s ease;
}
.premium-faq-item[open] { background: var(--bg-elev); }
.premium-faq-q {
  cursor: pointer;
  padding: 12px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  user-select: none;
}
.premium-faq-q::-webkit-details-marker { display: none; }
.premium-faq-q::after {
  content: "+";
  font-size: 18px;
  font-weight: 400;
  color: var(--text-secondary);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}
.premium-faq-item[open] .premium-faq-q::after {
  content: "−";
  transform: rotate(0deg);
}
.premium-faq-a {
  padding: 0 14px 14px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-secondary);
}

/* Beta controls */
.premium-beta-controls {
  background: color-mix(in srgb, #FFB800 8%, var(--bg-card));
  border: 1px dashed color-mix(in srgb, #FFB800 40%, transparent);
  border-radius: 14px;
  padding: 14px 16px;
  margin-top: 16px;
}
.premium-beta-label {
  font-size: 12px;
  font-weight: 800;
  color: #B8860B;
  letter-spacing: 0.04em;
  margin-bottom: 10px;
  text-transform: uppercase;
}
[data-theme="dark"] .premium-beta-label { color: #FFD700; }
.premium-beta-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.premium-beta-btn {
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 8px 12px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
}
.premium-beta-btn:hover { border-color: var(--tint); color: var(--text-primary); }
.premium-beta-btn.active {
  background: var(--text-primary);
  color: var(--bg-card);
  border-color: var(--text-primary);
}
.premium-beta-note {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 8px;
  line-height: 1.4;
}

/* ============ SETTINGS (bottom sheet) ============ */
.settings-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 1100;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: chatSlideUp 0.22s ease;
}
.settings-overlay.hidden { display: none; }
.settings-modal-sheet {
  background: var(--bg-page);
  border-radius: 24px 24px 0 0;
  width: 100%;
  max-width: 560px;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 -10px 40px rgba(0,0,0,0.2);
}
@media (min-width: 700px) {
  .settings-overlay { align-items: center; padding: 24px; }
  .settings-modal-sheet { border-radius: 24px; max-height: 88vh; }
}
.settings-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px 12px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.settings-modal-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 17px;
  font-weight: 700;
  color: var(--text-primary);
}
.settings-modal-icon { font-size: 22px; line-height: 1; }

/* ============ RECORDER ============ */

/* Toggle vue carte/liste */
.recorder-view-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  background: var(--bg-elev);
  border-radius: 12px;
  padding: 4px;
  margin-bottom: 14px;
}
.recorder-view-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: transparent;
  border: 0;
  border-radius: 9px;
  padding: 8px 12px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
}
.recorder-view-btn:hover { color: var(--text-primary); }
.recorder-view-btn.active {
  background: var(--bg-card);
  color: var(--text-primary);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.recorder-view-btn svg { width: 14px; height: 14px; }

/* Vue liste : recherche */
.recorder-search-row {
  position: relative;
  margin-bottom: 12px;
}
.recorder-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--text-secondary);
  pointer-events: none;
}
.recorder-search-input {
  width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 36px 10px 38px;
  font-family: inherit;
  font-size: 14px;
  color: var(--text-primary);
  outline: none;
  transition: border-color 0.15s ease;
}
.recorder-search-input:focus {
  border-color: var(--tint);
}
.recorder-search-input::-webkit-search-cancel-button { -webkit-appearance: none; }
.recorder-search-clear {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--bg-elev);
  border: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 11px;
  color: var(--text-secondary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.recorder-search-clear:hover { background: var(--bg-pressed); color: var(--text-primary); }

/* Vue liste : filtre cat scroller */
.recorder-cat-scroller {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 8px;
  margin-bottom: 8px;
  scrollbar-width: none;
}
.recorder-cat-scroller::-webkit-scrollbar { display: none; }
.recorder-cat-chip {
  flex-shrink: 0;
  background: transparent;
  border: 0;
  border-radius: 99px;
  padding: 6px 12px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.15s ease;
}
.recorder-cat-chip:hover { background: var(--bg-elev); color: var(--text-primary); }
.recorder-cat-chip.active {
  background: color-mix(in srgb, var(--tint) 14%, transparent);
  color: var(--tint);
}

.recorder-list-count {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
  padding: 0 4px;
}

/* Vue liste : rows */
.recorder-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.recorder-list-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: all 0.12s ease;
}
.recorder-list-row:hover {
  background: var(--bg-elev);
  border-color: color-mix(in srgb, var(--tint) 30%, var(--border));
  transform: translateX(2px);
}
.recorder-list-status {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  background: transparent;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.recorder-list-status.recorded {
  border-color: var(--green);
  background: var(--green);
  color: #fff;
}
.recorder-list-status svg { width: 12px; height: 12px; }
.recorder-list-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.recorder-list-sq {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.recorder-list-fr {
  font-size: 12px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.recorder-list-meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  color: var(--text-secondary);
}
.recorder-list-date {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
}
.recorder-list-meta svg { width: 14px; height: 14px; }

/* Progress (commun) */
.recorder-progress-row { margin-bottom: 16px; }

.recorder-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 1100;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: chatSlideUp 0.22s ease;
}
.recorder-overlay.hidden { display: none; }
.recorder-modal {
  background: var(--bg-page);
  border-radius: 24px 24px 0 0;
  width: 100%;
  max-width: 560px;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 -10px 40px rgba(0,0,0,0.2);
}
@media (min-width: 700px) {
  .recorder-overlay { align-items: center; padding: 24px; }
  .recorder-modal { border-radius: 24px; max-height: 88vh; }
}
.recorder-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px 12px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.recorder-modal-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 17px;
  font-weight: 700;
  color: var(--text-primary);
}
.recorder-modal-icon { font-size: 22px; line-height: 1; }
.recorder-modal-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px 20px 24px;
  padding-bottom: max(28px, env(safe-area-inset-bottom, 0));
}

/* Progress */
.recorder-progress-info {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
}
.recorder-progress-label {
  font-size: 11px;
  font-weight: 800;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.recorder-progress-val {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.recorder-progress-pct {
  font-weight: 500;
  color: var(--text-secondary);
}
.recorder-progress-track {
  height: 6px;
  background: var(--bg-elev);
  border-radius: 99px;
  overflow: hidden;
}
.recorder-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--tint), #34C759);
  border-radius: 99px;
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Filter pills */
.recorder-filter-row {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}
.recorder-filter-pill {
  flex: 1;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 99px;
  padding: 8px 12px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
}
.recorder-filter-pill:hover { background: var(--bg-elev); color: var(--text-primary); }
.recorder-filter-pill.active {
  background: var(--text-primary);
  color: var(--bg-card);
  border-color: var(--text-primary);
}

/* Card du mot courant */
.recorder-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 28px 20px 24px;
  text-align: center;
  position: relative;
  margin-bottom: 16px;
}
.recorder-already-tag {
  position: absolute;
  top: 12px;
  right: 12px;
  background: color-mix(in srgb, var(--green) 18%, var(--bg-card));
  color: var(--green);
  font-size: 11px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 99px;
  letter-spacing: 0.02em;
}
.recorder-word-sq {
  font-size: clamp(32px, 7vw, 44px);
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: 6px;
}
.recorder-word-fr {
  font-size: 17px;
  color: var(--text-primary);
  font-weight: 600;
  margin-bottom: 8px;
}
.recorder-word-phon {
  font-size: 14px;
  color: var(--text-secondary);
  font-style: italic;
  margin-bottom: 10px;
}
.recorder-word-cat {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--bg-elev);
  padding: 3px 10px;
  border-radius: 99px;
}

/* Volume meter */
.recorder-volume-row { margin-bottom: 16px; }
.recorder-volume-bar {
  height: 6px;
  background: var(--bg-elev);
  border-radius: 99px;
  overflow: hidden;
  position: relative;
}
.recorder-volume-bar > div {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #34C759, #FFB800, var(--tint));
  border-radius: 99px;
  transition: width 0.05s linear;
}

/* Bouton record */
.recorder-controls {
  display: flex;
  justify-content: center;
  margin-bottom: 14px;
}
.recorder-btn-record {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--tint);
  color: #fff;
  border: 0;
  border-radius: 99px;
  padding: 16px 32px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  letter-spacing: 0.01em;
  transition: all 0.15s ease;
  box-shadow: 0 4px 14px rgba(255, 59, 48, 0.25);
}
.recorder-btn-record:hover { transform: translateY(-1px); filter: brightness(1.05); }
.recorder-btn-record-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  display: inline-block;
}
.recorder-btn-record.is-recording {
  background: #fff;
  color: var(--tint);
  box-shadow: 0 0 0 3px var(--tint);
  animation: recPulse 1s ease-in-out infinite;
}
@keyframes recPulse {
  0%, 100% { box-shadow: 0 0 0 3px var(--tint), 0 0 0 0 rgba(255, 59, 48, 0.4); }
  50%      { box-shadow: 0 0 0 3px var(--tint), 0 0 0 10px rgba(255, 59, 48, 0); }
}
.recorder-btn-record.is-recording .recorder-btn-record-dot {
  background: var(--tint);
  border-radius: 3px;
}

/* [v182] État "preparing" : 1s entre click et vrai démarrage micro.
   Couleur orange (entre idle rouge et active rouge plein) pour signaler "presque". */
.recorder-btn-record.is-preparing {
  background: #FF9500;
  color: #fff;
  box-shadow: 0 0 0 3px #FF9500;
  animation: recPreparePulse 0.5s ease-in-out infinite;
  cursor: wait;
}
.recorder-btn-record.is-preparing .recorder-btn-record-dot {
  background: #fff;
  border-radius: 3px;
  animation: recPrepareDot 1s linear;
}
@keyframes recPreparePulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.05); }
}
@keyframes recPrepareDot {
  from { transform: scale(0.6); opacity: 0.6; }
  to   { transform: scale(1.2); opacity: 1; }
}

/* Secondary buttons */
.recorder-secondary-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin-bottom: 14px;
}
.recorder-btn-secondary {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 6px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.15s ease;
}
.recorder-btn-secondary:hover:not(:disabled) {
  background: var(--bg-elev);
  transform: translateY(-1px);
}
.recorder-btn-secondary:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.recorder-btn-secondary svg { width: 18px; height: 18px; }
.recorder-btn-validate:not(:disabled) {
  background: color-mix(in srgb, var(--green) 14%, var(--bg-card));
  border-color: color-mix(in srgb, var(--green) 40%, transparent);
  color: var(--green);
}

/* Bouton "Écouter version actuelle" + supprimer */
.recorder-existing-row {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}
.recorder-btn-existing {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: color-mix(in srgb, var(--green) 12%, var(--bg-card));
  border: 1px solid color-mix(in srgb, var(--green) 30%, transparent);
  border-radius: 12px;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--green);
  cursor: pointer;
  transition: all 0.15s ease;
}
.recorder-btn-existing:hover {
  background: color-mix(in srgb, var(--green) 20%, var(--bg-card));
  transform: translateY(-1px);
}
.recorder-btn-existing svg { width: 16px; height: 16px; }
.recorder-btn-delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  width: 44px;
  flex-shrink: 0;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
}
.recorder-btn-delete:hover {
  background: color-mix(in srgb, var(--tint) 10%, var(--bg-card));
  border-color: var(--tint);
  color: var(--tint);
}
.recorder-btn-delete svg { width: 18px; height: 18px; }

/* Nav row */
.recorder-nav-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding-top: 8px;
  border-top: 1px solid var(--separator);
}
.recorder-btn-nav {
  background: transparent;
  border: 0;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--tint);
  cursor: pointer;
  padding: 8px 4px;
  transition: opacity 0.15s ease;
}
.recorder-btn-nav:disabled { opacity: 0.3; cursor: not-allowed; }
.recorder-nav-counter {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

/* hide quiz phon when reverse mode */
.quiz-phon { transition: opacity 0.2s ease; }

/* ============ HEADER : XP + DAILY RING ============ */
/* ============================================================
   Badge XP unifié : ring de progression daily autour du chiffre
   Taille alignée avec .theme-toggle (36×36) pour cohérence header
   ============================================================ */
.xp-badge-ring {
  position: relative;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: transform 0.18s ease;
  flex-shrink: 0;
}
.xp-badge-ring:hover { transform: scale(1.06); }
.xp-badge-ring:active { transform: scale(0.94); }

.xp-badge-ring-svg {
  position: absolute;
  inset: 0;
  width: 36px;
  height: 36px;
  transform: rotate(-90deg);
  pointer-events: none;
}
.xp-badge-ring-bg {
  fill: var(--bg-card);
  stroke: var(--border);
  stroke-width: 1;
}
.xp-badge-ring-fg {
  fill: none;
  stroke: var(--tint);
  stroke-width: 2;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.6s cubic-bezier(0.4, 0, 0.2, 1), stroke 0.3s ease;
}
.xp-badge-ring-fg.goal-reached {
  stroke: var(--green);
  filter: drop-shadow(0 0 3px color-mix(in srgb, var(--green) 60%, transparent));
}
.xp-badge-ring-text {
  position: relative;
  z-index: 1;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

/* Tiers : couleur du chiffre (fond reste blanc/card pour cohérence header) */
.xp-badge-ring[data-tier="bronze"] .xp-badge-ring-text { color: #B8732D; }
[data-theme="dark"] .xp-badge-ring[data-tier="bronze"] .xp-badge-ring-text { color: #E89953; }

.xp-badge-ring[data-tier="silver"] .xp-badge-ring-text { color: #6B7280; }
[data-theme="dark"] .xp-badge-ring[data-tier="silver"] .xp-badge-ring-text { color: #C0C0C0; }

.xp-badge-ring[data-tier="gold"] .xp-badge-ring-text { color: #B8860B; }
[data-theme="dark"] .xp-badge-ring[data-tier="gold"] .xp-badge-ring-text { color: #FFD700; }

.xp-badge-ring[data-tier="platinum"] .xp-badge-ring-text { color: #2563EB; }
[data-theme="dark"] .xp-badge-ring[data-tier="platinum"] .xp-badge-ring-text { color: #93C5FD; }

.xp-badge-ring[data-tier="diamond"] .xp-badge-ring-text { color: var(--tint); }
.xp-badge-ring[data-tier="diamond"] {
  animation: gemPulseRing 2.5s ease-in-out infinite;
}
@keyframes gemPulseRing {
  0%, 100% { filter: drop-shadow(0 0 0 transparent); }
  50% { filter: drop-shadow(0 0 5px color-mix(in srgb, var(--tint) 40%, transparent)); }
}

/* Mobile : taille un poil plus compacte alignée theme-toggle */
@media (max-width: 420px) {
  .xp-badge-ring { width: 32px; height: 32px; }
  .xp-badge-ring-svg { width: 32px; height: 32px; }
  .xp-badge-ring-text { font-size: 9px; }
}

/* ============================================================
   Badge Streak (header) : 🔥 + nombre de jours
   ============================================================ */
/* ============================================================
   Badge Streak (header) : cercle 36×36 identique aux autres
   + pastille de comptage superposée en haut à droite (style iOS)
   ============================================================ */
.streak-badge {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 1px solid var(--border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.2s ease;
  flex-shrink: 0;
  box-shadow: var(--badge-shadow);
  padding: 0;
  font-family: inherit;
}
.streak-badge:hover { transform: scale(1.06); }
.streak-badge:active { transform: scale(0.94); }
.streak-badge-icon {
  font-size: 18px;
  line-height: 1;
  filter: grayscale(0.7) opacity(0.55); /* Muted par défaut (streak 0) */
  transition: filter 0.25s ease;
}

/* Pastille superposée : style notif iOS, en haut à droite */
.streak-badge-pill {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: #FF3B30;
  color: white;
  border: 2px solid var(--bg-page);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  box-shadow: 0 1px 3px rgba(255, 59, 48, 0.4);
  /* Pop-in subtil quand apparaît */
  animation: pillPopIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.streak-badge-pill.hidden { display: none; }
@keyframes pillPopIn {
  from { transform: scale(0); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* État actif : streak > 0 → flamme animée + pastille visible */
.streak-badge.active .streak-badge-icon {
  filter: none;
  animation: flameFlicker 1.8s ease-in-out infinite;
}
@keyframes flameFlicker {
  0%, 100% { transform: scale(1) rotate(-1deg); }
  50% { transform: scale(1.08) rotate(2deg); }
}

/* État hot : streak ≥ 7 → halo subtil rouge */
.streak-badge.hot {
  border-color: color-mix(in srgb, #FF3B30 35%, var(--border));
  box-shadow: 0 0 0 2px color-mix(in srgb, #FF3B30 10%, transparent), var(--badge-shadow);
}

/* Mobile : taille alignée theme-toggle (32×32) */
@media (max-width: 420px) {
  .streak-badge { width: 32px; height: 32px; }
  .streak-badge-icon { font-size: 16px; }
  .streak-badge-pill { font-size: 9px; min-width: 16px; height: 16px; top: -3px; right: -3px; }
}

/* ============================================================
   Streak modal (mini-dashboard streak)
   ============================================================ */
.streak-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 100;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: streakOverlayIn 0.2s ease;
}
.streak-overlay.hidden { display: none; }
@keyframes streakOverlayIn { from { opacity: 0; } to { opacity: 1; } }

.streak-modal {
  background: var(--bg-page);
  border-radius: 24px 24px 0 0;
  width: 100%;
  max-width: 480px;
  height: 88vh;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform 0.32s cubic-bezier(0.34, 1.36, 0.64, 1);
  box-shadow: 0 -8px 32px rgba(0,0,0,0.25);
  overflow: hidden;
}
.streak-overlay:not(.hidden) .streak-modal { transform: translateY(0); }
@media (min-width: 700px) {
  .streak-overlay { align-items: center; padding: 24px; }
  .streak-modal { border-radius: 24px; height: auto; max-height: calc(100vh - 48px); }
}

.streak-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px 16px;
  border-bottom: 0.5px solid var(--separator);
  flex-shrink: 0;
}
.streak-modal-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}
.streak-modal-icon { font-size: 22px; }

.streak-modal-body {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  padding: 24px 20px calc(24px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-height: 0;
}

/* Hero streak */
.streak-hero {
  text-align: center;
  padding: 20px 16px 24px;
  background: linear-gradient(135deg, color-mix(in srgb, #FF6B35 12%, var(--bg-card)) 0%, color-mix(in srgb, #FF9500 8%, var(--bg-card)) 100%);
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, #FF6B35 18%, transparent);
}
.streak-hero-val {
  font-size: 56px;
  font-weight: 900;
  letter-spacing: -0.04em;
  color: #C2410C;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.streak-hero-val::before {
  content: "🔥";
  font-size: 44px;
  animation: flameFlicker 1.6s ease-in-out infinite;
}
[data-theme="dark"] .streak-hero-val { color: #FFAB7A; }
.streak-hero-lbl {
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 6px;
}
.streak-hero-sub {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 10px;
  line-height: 1.4;
}

/* Stats : aigles + prochain palier */
.streak-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.streak-stat {
  background: var(--bg-card);
  border-radius: 14px;
  padding: 14px 8px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.streak-stat-icon { font-size: 22px; line-height: 1; }
.streak-stat-val {
  font-size: 20px;
  font-weight: 900;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.streak-stat-lbl {
  font-size: 11px;
  color: var(--text-secondary);
  font-weight: 600;
}

/* CTA : pratique aujourd'hui */
.streak-cta {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--tint);
  color: white;
  border: none;
  border-radius: 14px;
  padding: 14px 16px;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  transition: transform 0.16s ease, box-shadow 0.2s ease;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--tint) 30%, transparent);
}
.streak-cta:hover { transform: translateY(-1px); }
.streak-cta:active { transform: scale(0.98); }
.streak-cta.hidden { display: none; }
.streak-cta-icon { font-size: 26px; line-height: 1; }
.streak-cta-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.streak-cta-title { font-size: 14px; font-weight: 800; letter-spacing: -0.01em; }
.streak-cta-sub { font-size: 12px; opacity: 0.92; }
.streak-cta svg { width: 18px; height: 18px; opacity: 0.85; }

/* Calendrier 30 jours */
.streak-cal-title {
  font-size: 11px;
  font-weight: 800;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: -8px;
}
.streak-cal {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 6px;
}
.streak-cal-cell {
  aspect-ratio: 1;
  border-radius: 6px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  position: relative;
}
.streak-cal-cell.active {
  background: linear-gradient(135deg, #FF6B35 0%, #FF9500 100%);
  border-color: transparent;
}
.streak-cal-cell.saved {
  /* Jour sauvé par un aigle */
  background: linear-gradient(135deg, color-mix(in srgb, #FF6B35 35%, var(--bg-card)) 0%, color-mix(in srgb, #FF9500 30%, var(--bg-card)) 100%);
  border-color: color-mix(in srgb, #FF6B35 35%, transparent);
}
.streak-cal-cell.saved::after {
  content: "🦅";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
}
.streak-cal-cell.today {
  outline: 2px solid var(--tint);
  outline-offset: 1px;
}

.streak-hint {
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-secondary);
  padding: 14px;
  background: var(--bg-elev);
  border-radius: 12px;
}

/* ============ SETTINGS MODAL ============ */
.settings-modal {
  max-width: 520px;
}
.settings-title {
  flex: 1;
  font-size: 17px;
  font-weight: 700;
  color: var(--text-primary);
  padding: 4px 0;
}
.settings-body {
  flex: 1;
  padding: 16px 16px 24px;
  padding-bottom: max(28px, env(safe-area-inset-bottom, 0));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--bg-page);
}

/* Sections : style iOS — titre uppercase à l'extérieur + card visuelle */
.settings-section {
  margin-top: 20px;
}
.settings-section:first-child { margin-top: 8px; }

.settings-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0 16px 8px;
}

.settings-card {
  background: var(--bg-card);
  border-radius: 14px;
  border: 1px solid var(--border);
  overflow: hidden;
}
.settings-card-padded { padding: 14px; }

/* Rows iOS dans une card */
.settings-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--separator);
  width: 100%;
  font-family: inherit;
  font-size: 15px;
  color: var(--text-primary);
  text-align: left;
}
.settings-row:first-child { border-top: 0; }
.settings-row-action {
  cursor: pointer;
  transition: background 0.12s ease;
  font-weight: 500;
}
.settings-row-action:hover { background: var(--bg-elev); }
.settings-row-action > span:first-child { flex: 1; }
.settings-row-action svg {
  width: 16px;
  height: 16px;
  color: var(--text-secondary);
  flex-shrink: 0;
}
.settings-row-action-tint { color: var(--tint); font-weight: 600; }
.settings-row-action-tint svg { color: var(--tint); }
.settings-row-action-danger { color: var(--tint); }
.settings-row-action-danger svg { color: var(--tint); }

/* [v163] Settings row : icône + label + badge + chevron pattern */
.settings-row-icon-wrap {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--tint) 12%, transparent);
  border-radius: 7px;
  color: var(--tint);
  flex-shrink: 0;
}
.settings-row-icon-wrap svg { color: var(--tint); width: 16px; height: 16px; }
.settings-row-label { flex: 1; }
.settings-row-badge {
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  background: var(--tint);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  border-radius: 99px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  flex-shrink: 0;
}
.settings-row-chevron {
  width: 16px;
  height: 16px;
  color: var(--text-secondary);
  flex-shrink: 0;
}

/* Footer text sous une card (style iOS) */
.settings-footer-text {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.45;
  padding: 8px 16px 0;
}
.settings-footer-text strong { color: var(--text-primary); font-weight: 600; }

/* Section footer (version) */
.settings-section-footer {
  text-align: center;
  margin-top: 28px;
}
.settings-version {
  font-size: 11px;
  color: var(--text-secondary);
  opacity: 0.6;
}
.settings-version-link {
  display: inline-block;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--tint);
  text-decoration: none;
  opacity: 0.85;
}
.settings-version-link:hover { opacity: 1; text-decoration: underline; }

/* Account row spécifique */
.settings-account-row { padding: 14px 16px; }
.settings-account-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--tint);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 800;
  flex-shrink: 0;
}
.settings-account-info {
  flex: 1;
  min-width: 0;
}
.settings-account-email {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.settings-account-sub {
  font-size: 11.5px;
  color: var(--text-secondary);
  margin-top: 2px;
  line-height: 1.35;
}

/* Legacy : inputs/help (peuvent rester pour usages futurs) */
.settings-tag {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--bg-elev);
  color: var(--text-secondary);
  padding: 2px 7px;
  border-radius: 99px;
}
.settings-sublabel {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.45;
  margin-bottom: 10px;
}
.settings-link { color: var(--tint); font-weight: 500; }
.settings-input {
  width: 100%;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 11px;
  padding: 11px 14px;
  font-size: 14px;
  color: var(--text-primary);
  font-family: ui-monospace, SFMono-Regular, monospace;
  outline: none;
}
.settings-input:focus { border-color: var(--tint); }
.settings-help {
  font-size: 11.5px;
  color: var(--text-secondary);
  margin-top: 8px;
  line-height: 1.45;
  font-style: italic;
  opacity: 0.85;
}

/* Powered by Sam encart (utilisé dans une card padded) */
.settings-powered-by {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: color-mix(in srgb, var(--tint) 10%, var(--bg-elev));
  border: 1px solid color-mix(in srgb, var(--tint) 22%, transparent);
  color: var(--text-primary);
  border-radius: 10px;
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 600;
}
.settings-powered-icon { font-size: 14px; }
[data-theme="dark"] .settings-powered-by {
  background: color-mix(in srgb, var(--tint) 18%, var(--bg-elev));
}

.goal-pills {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.goal-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  background: var(--bg-elev);
  border: 2px solid transparent;
  border-radius: 12px;
  padding: 12px 8px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.15s ease;
}
.goal-pill span {
  font-size: 11px;
  color: var(--text-secondary);
  font-weight: 500;
}
.goal-pill.active {
  border-color: var(--tint);
  background: color-mix(in srgb, var(--tint) 8%, var(--bg-elev));
}
.goal-pill.active span { color: var(--tint); }

/* Lang toggle : 2 colonnes FR / EN dans Réglages */
.lang-toggle {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.lang-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--bg-elev);
  border: 2px solid transparent;
  border-radius: 12px;
  padding: 12px 8px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.15s ease;
}
.lang-toggle-btn:hover { border-color: var(--border); }
.lang-toggle-btn.active {
  border-color: var(--tint);
  background: color-mix(in srgb, var(--tint) 8%, var(--bg-elev));
}
.lang-toggle-flag {
  font-size: 18px;
  line-height: 1;
}
.lang-toggle-name { font-size: 14px; }

/* Theme pills (clair / sombre / auto) */
.theme-pills {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.theme-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--bg-elev);
  border: 2px solid transparent;
  border-radius: 12px;
  padding: 14px 8px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.15s ease;
}
.theme-pill svg { width: 22px; height: 22px; color: var(--text-secondary); }
.theme-pill.active {
  border-color: var(--tint);
  background: color-mix(in srgb, var(--tint) 8%, var(--bg-elev));
}
.theme-pill.active svg { color: var(--tint); }

/* ============ EXERCISES (Pratique) ============ */

/* Chips de sélection du type d'exercice (matche cat-scroller de Mots) */
.ex-type-scroller {
  position: sticky;
  top: var(--nav-h, 78px);
  z-index: 49;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 10px 14px;
  margin: 0 0 16px;
  background: var(--bg-card);
  border-radius: 14px;
  box-shadow: var(--card-shadow);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.ex-type-scroller::-webkit-scrollbar { display: none; }
.ex-type-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 99px;
  padding: 6px 12px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.15s ease;
}
.ex-type-chip-icon { font-size: 14px; line-height: 1; }
.ex-type-chip-label { color: inherit; }
.ex-type-chip:hover { background: var(--bg-elev); color: var(--text-primary); }
.ex-type-chip.active {
  background: var(--text-primary);
  color: var(--bg-card);
  border-color: var(--text-primary);
}
@media (min-width: 880px) {
  .ex-type-scroller {
    top: 0;
    flex-wrap: wrap;
    overflow-x: visible;
    margin: 0 0 20px;
    padding: 12px 16px;
    gap: 8px;
  }
}

/* Info card (description du mode actuel) */
.ex-info-card {
  background: var(--bg-card);
  border-radius: 14px;
  padding: 12px 14px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 14px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.ex-info-icon {
  width: 18px;
  height: 18px;
  color: var(--tint);
  flex-shrink: 0;
  margin-top: 2px;
}
.ex-info-text {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-secondary);
  flex: 1;
}
.ex-info-text strong {
  color: var(--text-primary);
  font-weight: 700;
}

/* Session bar (DEPRECATED - kept for back-compat) */
.ex-session-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  margin-top: 4px;
}
.ex-session-bar .quiz-score {
  margin: 0;
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: 500;
}

/* Practice grid (matche study-grid à la pixel près) */
.practice-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
@media (min-width: 880px) {
  .practice-grid {
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 28px;
    align-items: start;
    margin-bottom: 24px;
  }
}
.practice-main { min-width: 0; }
.practice-side {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 14px;
}
@media (min-width: 880px) {
  .practice-side { margin-top: 0; gap: 16px; }
  .practice-side .stats { margin-top: 0; }
}

/* Niveau card */
.level-card {
  background: var(--bg-card);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.level-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 10px;
}
.level-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.level-tier-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}
.level-tier-dot[data-tier="bronze"]   { background: linear-gradient(135deg, #CD7F32, #B8732D); }
.level-tier-dot[data-tier="silver"]   { background: linear-gradient(135deg, #D1D5DB, #9CA3AF); }
.level-tier-dot[data-tier="gold"]     { background: linear-gradient(135deg, #FFE066, #FFD700); }
.level-tier-dot[data-tier="platinum"] { background: linear-gradient(135deg, #DBEAFE, #93C5FD); }
.level-tier-dot[data-tier="diamond"]  { background: linear-gradient(135deg, #FF3B30, #A855F7); }
.level-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
}
.level-progress-track {
  height: 8px;
  background: var(--bg-elev);
  border-radius: 99px;
  overflow: hidden;
  margin-bottom: 8px;
}
.level-progress-bar {
  height: 100%;
  border-radius: 99px;
  width: 0%;
  transition: width 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
.level-progress-bar[data-tier="bronze"]   { background: linear-gradient(90deg, #CD7F32, #E08F44); }
.level-progress-bar[data-tier="silver"]   { background: linear-gradient(90deg, #9CA3AF, #C0C0C0); }
.level-progress-bar[data-tier="gold"]     { background: linear-gradient(90deg, #FFD700, #FFE066); }
.level-progress-bar[data-tier="platinum"] { background: linear-gradient(90deg, #93C5FD, #BFDBFE); }
.level-progress-bar[data-tier="diamond"]  { background: linear-gradient(90deg, #FF3B30, #A855F7); }
.level-next {
  font-size: 12px;
  color: var(--text-secondary);
}

/* Restart button (sidebar) */
.ex-restart-btn-side {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 12px 14px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
  width: 100%;
}
.ex-restart-btn-side svg { width: 16px; height: 16px; }
.ex-restart-btn-side:hover {
  background: var(--bg-pressed);
  color: var(--text-primary);
}

/* Legacy small restart btn (no longer used but kept for compat) */
.ex-restart-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 0;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 99px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.ex-restart-btn svg { width: 14px; height: 14px; }
.ex-restart-btn:hover {
  background: var(--bg-elev);
  color: var(--text-primary);
}

.exercise-stage {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 14px;
}
.ex-card {
  background: var(--bg-card);
  border-radius: 18px;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  position: relative;
}
.ex-type-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-align: center;
}
.ex-prompt-big {
  font-size: 32px;
  font-weight: 700;
  color: var(--text-primary);
  text-align: center;
  line-height: 1.2;
  word-break: break-word;
  max-width: 100%;
}
.ex-phon {
  font-size: 14px;
  color: var(--text-secondary);
  font-style: italic;
  text-align: center;
}
.ex-audio { margin-top: 4px; }
.ex-options {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
@media (min-width: 600px) {
  .ex-options { grid-template-columns: 1fr 1fr; }
}
.ex-actions {
  display: flex;
  gap: 8px;
  width: 100%;
  margin-top: 8px;
}
.ex-actions .online-btn { flex: 1; min-width: 0; }

/* MATCH PAIRS */
.match-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  width: 100%;
}
.match-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.match-tile {
  background: var(--bg-elev);
  border: 2px solid transparent;
  border-radius: 12px;
  padding: 12px 10px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: center;
  word-break: break-word;
  min-height: 50px;
}
.match-tile:hover:not(.locked) { background: var(--bg-pressed); }
.match-tile.selected {
  border-color: var(--tint);
  background: color-mix(in srgb, var(--tint) 10%, var(--bg-elev));
}
.match-tile.matched {
  background: color-mix(in srgb, var(--green) 18%, var(--bg-elev));
  color: var(--green);
  border-color: transparent;
}
.match-tile.locked { cursor: default; opacity: 0.8; }
.match-tile.wrong { animation: shake 0.4s; border-color: var(--tint); }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

/* BUILD */
.build-target {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  text-align: center;
  padding: 0 12px;
}
.build-slots {
  width: 100%;
  min-height: 56px;
  background: var(--bg-elev);
  border-radius: 12px;
  padding: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-content: flex-start;
  border: 2px dashed var(--border);
}
.build-bank {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}
.build-tile {
  background: var(--bg-page);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 12px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.12s ease;
}
[data-theme="dark"] .build-tile { background: var(--bg-elev); }
.build-tile:hover:not(:disabled) { transform: translateY(-1px); }
.build-tile.used { opacity: 0.25; cursor: default; }
.build-tile.placed { background: var(--bg-card); }
.build-tile.correct { background: color-mix(in srgb, var(--green) 18%, transparent); color: var(--green); border-color: var(--green); }
.build-tile.wrong { background: color-mix(in srgb, var(--tint) 12%, transparent); color: var(--tint); border-color: var(--tint); }
.build-correct-hint {
  font-size: 13px;
  color: var(--text-secondary);
  text-align: center;
  margin-top: 8px;
  background: var(--bg-elev);
  padding: 10px 14px;
  border-radius: 10px;
  width: 100%;
}
.build-correct-hint strong { color: var(--text-primary); font-weight: 700; }

/* LISTEN */
.listen-card { padding: 32px 20px; }
.listen-big-audio {
  background: var(--tint);
  border: 0;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  cursor: pointer;
  margin: 8px 0;
  box-shadow: 0 8px 24px rgba(255, 59, 48, 0.3);
  transition: all 0.15s ease;
  gap: 0;
}
.listen-big-audio:hover { transform: scale(1.05); }
.listen-big-audio:active { transform: scale(0.95); }
.listen-big-audio svg { width: 32px; height: 32px; }
.listen-hint {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 2px;
  opacity: 0.85;
}

/* TYPE */
.type-input-wrap { width: 100%; margin-top: 4px; }
.type-input {
  width: 100%;
  background: var(--bg-elev);
  border: 2px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  font-family: inherit;
  font-size: 17px;
  color: var(--text-primary);
  outline: none;
  text-align: center;
  font-weight: 600;
  transition: border-color 0.15s ease, background 0.2s ease;
}
.type-input:focus { border-color: var(--tint); }
.type-input.correct {
  border-color: var(--green);
  background: color-mix(in srgb, var(--green) 12%, var(--bg-elev));
  color: var(--green);
}
.type-input.wrong {
  border-color: var(--tint);
  background: color-mix(in srgb, var(--tint) 10%, var(--bg-elev));
  color: var(--tint);
}

/* FILL */
.fill-phrase {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  text-align: center;
  line-height: 1.4;
  word-break: break-word;
}
.fill-blank {
  display: inline-block;
  background: var(--bg-elev);
  color: var(--tint);
  padding: 0 14px;
  border-radius: 8px;
  border-bottom: 2px solid var(--tint);
  font-weight: 700;
  min-width: 80px;
  text-align: center;
}
.fill-revealed {
  display: inline-block;
  background: color-mix(in srgb, var(--green) 18%, transparent);
  color: var(--green);
  padding: 0 14px;
  border-radius: 8px;
  font-weight: 700;
}
.fill-trans {
  font-size: 15px;
  color: var(--text-secondary);
  font-style: italic;
  text-align: center;
}

/* ============ ONLINE DICT (search modal) ============ */
.search-section-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 14px 12px 6px;
}
.search-empty-inline {
  padding: 6px 12px 12px;
  color: var(--text-secondary);
  font-size: 13px;
}

.online-results { padding: 0 8px 12px; }
.online-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px;
  color: var(--text-secondary);
  font-size: 14px;
}
.online-empty {
  padding: 16px 12px;
  color: var(--text-secondary);
  font-size: 14px;
  text-align: center;
}
.spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid var(--bg-elev);
  border-top-color: var(--tint);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  flex-shrink: 0;
}
@keyframes spin { to { transform: rotate(360deg); } }

.online-card {
  background: var(--bg-elev);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Zone hero : la traduction principale, mise en valeur */
.online-hero {
  background: rgba(0, 0, 0, 0.025);
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--border);
}
[data-theme="dark"] .online-hero {
  background: rgba(255, 255, 255, 0.04);
}

.online-dir {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-align: center;
}
.online-translation {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
}
.online-src {
  font-size: 19px;
  font-weight: 600;
  color: var(--text-primary);
  word-break: break-word;
}
.online-arrow {
  width: 18px;
  height: 18px;
  color: var(--text-secondary);
  flex-shrink: 0;
}
.online-tgt {
  font-size: 22px;
  font-weight: 700;
  color: var(--tint);
  word-break: break-word;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.online-tgt-text { line-height: 1.1; }
.online-audio {
  background: transparent;
  border: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--tint);
  flex-shrink: 0;
}
.online-audio svg { width: 16px; height: 16px; }
.online-audio:hover { background: rgba(255, 59, 48, 0.1); }
.online-audio.playing { background: var(--tint); color: #fff; }

.online-meta {
  font-size: 12px;
  font-weight: 600;
  padding: 4px 11px;
  border-radius: 999px;
  align-self: center;
}
.online-meta-high { background: rgba(52, 199, 89, 0.18); color: var(--green); }
.online-meta-mid { background: rgba(255, 149, 0, 0.18); color: #FF9500; }
.online-meta-low { background: rgba(255, 59, 48, 0.15); color: var(--tint); }
[data-theme="dark"] .online-meta-mid { color: #FF9F0A; }

/* Sections (alternatives) avec leur propre zone */
.online-section {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.online-section-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}
.online-alts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.online-alt {
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-primary);
  border-radius: 999px;
  padding: 5px 11px;
  font-size: 13px;
  font-weight: 500;
}

/* Actions : zone propre, séparée */
.online-actions {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
}
.online-btn {
  padding: 11px 14px;
  border-radius: 11px;
  border: 0;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.online-btn-primary {
  background: var(--tint);
  color: #fff;
  flex: 1;
}
.online-btn-primary:hover { filter: brightness(1.05); }
.online-btn-secondary {
  background: var(--bg-card);
  color: var(--text-primary);
  flex: 0 0 auto;
}
.online-btn-secondary:hover { background: var(--bg-pressed); }
.online-btn-disabled {
  background: var(--bg-card);
  color: var(--text-secondary);
  flex: 1;
  opacity: 0.7;
  cursor: not-allowed;
}

/* Disclaimer : footer discret */
.online-disclaimer {
  padding: 4px 16px 14px;
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--text-secondary);
  opacity: 0.65;
  text-align: center;
  font-style: italic;
}

/* Custom word badge on card */
#cardMeta { transition: color 0.15s ease; }
.card-cat:has(+ * .word) { /* fallback */ }

/* Remove custom word button */
.remove-custom-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  border-radius: 12px;
  padding: 10px 14px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  width: 100%;
  transition: all 0.15s ease;
}
.remove-custom-btn:hover {
  background: var(--tint);
  color: #fff;
  border-color: var(--tint);
}
.remove-custom-btn svg { width: 15px; height: 15px; }

/* Search row "Perso" cat tag */
.search-row[data-sq] .search-row-cat { font-size: 11px; }