* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  background: #f6f3ed;
  color: #1f2937;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  overflow-x: hidden;
}

body {
  padding-bottom: 82px;
}

.page {
  max-width: 900px;
  margin: 0 auto;
  padding: 18px 16px 90px;
}

.home-page {
  padding-top: 28px;
}

.keypad-card {
  background: transparent;
}

.recueil-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 18px;
}

.recueil-btn {
  border: 1px solid #ddd6c8;
  background: #fffaf0;
  color: #374151;
  border-radius: 16px;
  padding: 13px 8px;
  font-weight: 800;
  box-shadow: 0 3px 10px rgba(0,0,0,0.05);
}

.recueil-btn.active {
  background: #2563eb;
  color: white;
  border-color: #2563eb;
}

.display {
  background: #fffaf0;
  border: 1px solid #ddd6c8;
  border-radius: 22px;
  padding: 20px;
  text-align: center;
  font-size: 2.5rem;
  font-weight: 900;
  letter-spacing: 4px;
  color: #2563eb;
  margin-bottom: 16px;
  box-shadow: 0 8px 22px rgba(0,0,0,0.07);
}

.display.empty {
  color: #c7bda9;
  letter-spacing: 2px;
}

.keypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 11px;
}

.keypad button {
  height: 64px;
  border: 1px solid #ddd6c8;
  border-radius: 20px;
  background: #fffaf0;
  color: #1f2937;
  font-size: 1.38rem;
  font-weight: 900;
  box-shadow: 0 5px 14px rgba(0,0,0,0.06);
}

.keypad .ok {
  background: #2563eb;
  border-color: #2563eb;
  color: white;
}

.message {
  min-height: 24px;
  margin-top: 14px;
  color: #b91c1c;
  text-align: center;
  font-size: .92rem;
}

.chant-page {
  padding-bottom: 190px;
}

.chant-simple-header {
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.chant-simple-header h1 {
  margin: 0;
  text-align: center;
  color: #1f2937;
  font-size: 1.25rem;
  line-height: 1.35;
  font-weight: 900;
}

.back-btn,
.fav-btn {
  width: 42px;
  height: 42px;
  border-radius: 15px;
  border: 1px solid #ddd6c8;
  background: #fffaf0;
  color: #374151;
  font-size: 1rem;
  box-shadow: 0 3px 10px rgba(0,0,0,0.05);
}

.fav-btn {
  color: #dc2626;
}

.lyrics {
  text-align: center;
  font-size: 1.18rem;
  line-height: 1.78;
  color: #1f2937;
}

.verse {
  white-space: pre-line;
  padding: 12px 6px;
  margin-bottom: 10px;
}

.modern-player {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 76px;
  z-index: 1200;
  background: rgba(255,250,240,0.97);
  border: 1px solid #ddd6c8;
  border-radius: 24px;
  padding: 13px 14px;
  box-shadow: 0 -8px 24px rgba(0,0,0,0.14);
  backdrop-filter: blur(12px);
}

.progress-wrap {
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  gap: 8px;
  margin-bottom: 9px;
  color: #6b7280;
  font-size: .75rem;
}

#progress {
  width: 100%;
  accent-color: #2563eb;
}

.controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 32px;
}

.small-control {
  background: transparent;
  border: none;
  color: #374151;
  font-size: 1rem;
}

.small-control span {
  font-size: .7rem;
  margin-left: 2px;
}

.play-main {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: none;
  background: #2563eb;
  color: white;
  font-size: 1.3rem;
  box-shadow: 0 8px 20px rgba(37,99,235,0.28);
}

.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100vw;
  height: 64px;
  background: #fffaf0;
  border-top: 1px solid #ddd6c8;
  display: flex;
  justify-content: space-around;
  align-items: center;
  z-index: 1000;
  overflow: hidden;
}

.bottom-nav .nav-item {
  min-width: 0;
  flex: 1;
  text-align: center;
  text-decoration: none;
  color: #8b8171;
  font-size: .72rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.bottom-nav .nav-item i {
  font-size: 1.15rem;
}

.bottom-nav .nav-item.active {
  color: #2563eb;
}

@media (max-width: 420px) {
  .page {
    padding-left: 12px;
    padding-right: 12px;
  }

  .lyrics {
    font-size: 1.12rem;
  }

  .chant-simple-header h1 {
    font-size: 1.12rem;
  }

  .keypad button {
    height: 60px;
  }
}

/* ===== V6 clavier mobile aéré avec touches rondes ===== */

.home-page {
  padding-top: 24px;
}

.keypad-card {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}

.recueil-tabs {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 0 auto 24px;
  background: transparent;
}

.recueil-btn {
  flex: 0 0 auto;
  border: 1px solid #e5d8c7;
  background: rgba(255, 250, 240, 0.85);
  color: #7c6f60;
  border-radius: 999px;
  padding: 10px 16px;
  font-size: 0.9rem;
  font-weight: 850;
  box-shadow: 0 4px 12px rgba(120, 80, 30, 0.06);
}

.recueil-btn.active {
  background: #2563eb;
  color: #ffffff;
  border-color: #2563eb;
  box-shadow: 0 7px 16px rgba(37, 99, 235, 0.25);
}

.display {
  width: min(230px, 80%);
  margin: 0 auto 26px;
  padding: 14px 18px;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid #e5d8c7;
  color: #1d4ed8;
  font-size: 2.25rem;
  font-weight: 950;
  letter-spacing: 5px;
  box-shadow: 0 8px 22px rgba(120, 80, 30, 0.10);
}

.display.empty {
  color: #c7bda9;
}

.keypad {
  max-width: 330px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 86px);
  justify-content: center;
  gap: 18px;
}

.keypad button {
  width: 86px;
  height: 86px;
  border-radius: 50%;
  border: 1px solid #eadfce;
  background: #ffffff;
  color: #1f2937;
  font-size: 1.55rem;
  font-weight: 900;
  box-shadow: 0 10px 22px rgba(120, 80, 30, 0.12);
  transition: transform 0.08s ease, box-shadow 0.08s ease, background 0.08s ease;
}

.keypad button:active {
  transform: scale(0.94);
  box-shadow: 0 4px 10px rgba(120, 80, 30, 0.14);
  background: #f9fafb;
}

#backspace {
  background: #fff1f2;
  color: #be123c;
  border-color: #fecdd3;
}

.keypad .ok {
  background: #2563eb;
  border-color: #2563eb;
  color: #ffffff;
  font-size: 1.05rem;
  letter-spacing: 0.5px;
  box-shadow: 0 10px 22px rgba(37, 99, 235, 0.30);
}

.message {
  margin-top: 24px;
}

@media (max-width: 380px) {
  .keypad {
    grid-template-columns: repeat(3, 78px);
    gap: 14px;
  }

  .keypad button {
    width: 78px;
    height: 78px;
  }

  .display {
    font-size: 2rem;
  }

  .recueil-btn {
    padding: 9px 12px;
    font-size: 0.82rem;
  }
}

/* ===== V7 aperçu du titre en direct ===== */

.preview-title {
  min-height: 44px;
  max-width: 340px;
  margin: -12px auto 24px;
  padding: 0 8px;
  text-align: center;
  color: #374151;
  font-size: 1.02rem;
  font-weight: 800;
  line-height: 1.35;
}

.preview-title.not-found {
  color: #be123c;
  font-weight: 700;
}

@media (max-width: 380px) {
  .preview-title {
    font-size: 0.95rem;
    margin-bottom: 20px;
  }
}

/* ===== V9 APERCU TITRE - structure corrigée ===== */
.preview-wrap {
  width: 100%;
  min-height: 70px;
  margin: 0 auto 28px auto;
  padding: 0 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.preview-title {
  width: 100%;
  max-width: 340px;
  text-align: center;
  color: #374151;
  font-size: 1.06rem;
  font-weight: 850;
  line-height: 1.4;
  display: block;
}

.preview-title:empty::after {
  content: "";
}

.preview-title.not-found {
  color: #be123c;
  font-weight: 800;
}

.display {
  margin-bottom: 10px !important;
}

.keypad {
  margin-top: 0 !important;
}

@media (max-width: 380px) {
  .preview-wrap {
    min-height: 66px;
    margin-bottom: 26px;
    padding: 0 12px;
  }

  .preview-title {
    font-size: 0.98rem;
    max-width: 300px;
  }
}

/* ===== V10 sélecteur recueil modernisé sans icônes ===== */

.recueil-tabs {
  position: relative !important;
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 0 !important;

  max-width: 390px !important;
  margin: 0 auto 26px auto !important;
  padding: 6px !important;

  background: rgba(255, 255, 255, 0.72) !important;
  border: 1px solid #e8dccb !important;
  border-radius: 999px !important;

  box-shadow:
    inset 0 1px 2px rgba(255,255,255,0.9),
    0 8px 22px rgba(120, 80, 30, 0.08) !important;
}

.recueil-btn {
  position: relative !important;
  z-index: 1 !important;

  border: none !important;
  background: transparent !important;
  color: #7c6f60 !important;

  border-radius: 999px !important;
  padding: 12px 10px !important;

  font-size: 0.92rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.1px !important;

  box-shadow: none !important;
  transition:
    color 0.18s ease,
    background 0.18s ease,
    transform 0.08s ease,
    box-shadow 0.18s ease !important;
}

.recueil-btn:active {
  transform: scale(0.97) !important;
}

.recueil-btn.active {
  color: #ffffff !important;
  background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
  box-shadow:
    0 7px 16px rgba(37, 99, 235, 0.26),
    inset 0 1px 0 rgba(255,255,255,0.22) !important;
}

.recueil-btn:not(.active):hover {
  color: #1f2937 !important;
  background: rgba(255, 250, 240, 0.65) !important;
}

@media (max-width: 380px) {
  .recueil-tabs {
    max-width: 100% !important;
    padding: 5px !important;
    margin-bottom: 24px !important;
  }

  .recueil-btn {
    font-size: 0.82rem !important;
    padding: 11px 6px !important;
  }
}

/* ===== V11 page catégories FFPM ===== */

.categories-page {
  padding-top: 22px;
}

.categories-head {
  text-align: center;
  margin-bottom: 18px;
}

.categories-head h1 {
  margin: 0;
  font-size: 1.45rem;
  color: #1f2937;
}

.categories-head p {
  margin: 8px auto 0;
  max-width: 360px;
  color: #6b7280;
  line-height: 1.45;
  font-size: 0.94rem;
}

.categories-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.category-card {
  background: #fffaf0;
  border: 1px solid #e5d8c7;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 8px 22px rgba(120, 80, 30, 0.08);
}

.category-toggle {
  width: 100%;
  border: none;
  background: linear-gradient(135deg, #ffffff, #fff7e8);
  color: #1f2937;
  padding: 16px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-weight: 900;
  font-size: 0.98rem;
}

.category-toggle small {
  color: #8b8171;
  font-size: 0.78rem;
  font-weight: 700;
}

.category-content {
  display: none;
  padding: 0 12px 12px;
}

.category-card.open .category-content {
  display: block;
}

.subcategory {
  border-top: 1px solid #eee2d1;
}

.subcategory-toggle {
  width: 100%;
  border: none;
  background: transparent;
  color: #374151;
  padding: 13px 4px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 0.95rem;
  font-weight: 800;
}

.subcategory-toggle small {
  color: #8b8171;
  font-size: 0.76rem;
  font-weight: 700;
}

.chants-list {
  display: none;
  padding: 0 0 12px;
}

.subcategory.open .chants-list {
  display: block;
}

.chant-row {
  display: block;
  text-decoration: none;
  color: #1d4ed8;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 15px;
  padding: 12px 13px;
  margin: 7px 0;
  font-weight: 800;
  line-height: 1.35;
}

.empty-sub {
  color: #9ca3af;
  background: #f8f1e7;
  border-radius: 14px;
  padding: 11px 12px;
  margin: 4px 0 8px;
  font-size: 0.86rem;
  line-height: 1.4;
}

/* ===== V13 catégories plus lisibles ===== */

.categories-list {
  gap: 14px;
}

.category-card {
  background: #fffdf8;
  border: 1px solid #e2d4bf;
  box-shadow: 0 8px 22px rgba(120, 80, 30, 0.09);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.category-card.open {
  border-color: #d97706;
  box-shadow: 0 12px 28px rgba(217, 119, 6, 0.16);
}

.category-toggle {
  background: #fffaf0;
  color: #374151;
  border-left: 6px solid transparent;
  padding: 17px 16px;
}

.category-card.open .category-toggle {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: white;
  border-left-color: #92400e;
}

.category-card.open .category-toggle small {
  color: #fffbeb;
}

.category-toggle span {
  letter-spacing: .2px;
}

.category-content {
  background: #fffaf0;
  padding: 10px 12px 14px;
}

.subcategory {
  border-top: none;
  margin-bottom: 8px;
  border-radius: 16px;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid #eadfce;
}

.subcategory-toggle {
  padding: 13px 14px;
  background: #ffffff;
}

.subcategory.open {
  border-color: #f59e0b;
  background: #fff7ed;
}

.subcategory.open .subcategory-toggle {
  background: #fff7ed;
  color: #92400e;
}

.subcategory.open .subcategory-toggle small {
  color: #b45309;
}

.chants-list {
  padding: 0 12px 12px;
  background: #fff7ed;
}

.chant-row {
  background: white;
  border-color: #fed7aa;
  color: #92400e;
  box-shadow: 0 4px 12px rgba(120, 80, 30, 0.07);
}

.empty-sub {
  background: #fffaf0;
  color: #9a8370;
  border: 1px dashed #eadfce;
}

.category-card:not(.open) {
  opacity: 0.92;
}

.category-card:not(.open) .category-toggle {
  background: #fffdf8;
}

@media (max-width: 420px) {
  .category-toggle {
    padding: 15px 14px;
  }

  .category-content {
    padding: 8px 10px 12px;
  }
}

/* ===== V14 mode focus catégories ===== */

.categories-list.focus-mode .category-card:not(.open) {
  display: none;
}

.categories-list.focus-mode {
  gap: 0;
}

.show-all-categories {
  display: none;
  width: calc(100% - 28px);
  max-width: 420px;
  margin: 18px auto 96px;
  border: 1px solid #fed7aa;
  background: #fff7ed;
  color: #92400e;
  border-radius: 18px;
  padding: 14px 16px;
  font-weight: 900;
  font-size: 0.95rem;
  box-shadow: 0 8px 20px rgba(120, 80, 30, 0.08);
}

.show-all-categories.visible {
  display: block;
}

.categories-list.focus-mode .category-card.open {
  margin-top: 4px;
}

.categories-list.focus-mode .category-card.open .category-toggle {
  border-radius: 22px 22px 0 0;
}

.categories-list.focus-mode .category-content {
  display: block;
}

/* ===== V15 simplification catégories + page chant blanche ===== */

/* Enlever visuellement toute ligne small restante dans les grandes catégories */
.category-toggle > small {
  display: none !important;
}

.category-toggle {
  justify-content: center;
  text-align: center;
  min-height: 58px;
}

/* Page chant plus blanche et plus lisible */
body:has(.chant-page) {
  background: #ffffff;
}

.chant-page {
  background: #ffffff;
}

.chant-simple-header {
  background: #ffffff;
  border-bottom: 1px solid #f1f1f1;
  padding-bottom: 12px;
  margin-bottom: 16px;
}

.verse {
  background: #ffffff !important;
}

.modern-player {
  background: rgba(255, 255, 255, 0.98);
  border-color: #e5e7eb;
}

.bottom-nav {
  background: #ffffff;
}

/* ===== V16 page recherche ===== */

.search-page {
  background: #ffffff;
  min-height: 100vh;
  padding-top: 18px;
}

.search-head {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #ffffff;
  padding: 4px 0 14px;
}

#searchInput {
  width: 100%;
  border: 1px solid #e5e7eb;
  background: #f9fafb;
  color: #1f2937;
  border-radius: 18px;
  padding: 15px 16px;
  font-size: 1rem;
  outline: none;
  box-shadow: 0 5px 14px rgba(0,0,0,0.04);
}

#searchInput:focus {
  border-color: #d97706;
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(217,119,6,0.12);
}

.search-status {
  color: #8b8171;
  font-size: 0.9rem;
  margin: 4px 2px 14px;
}

.search-results {
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding-bottom: 90px;
}

.search-result {
  display: block;
  text-decoration: none;
  background: #fffaf0;
  border: 1px solid #e8dccb;
  border-radius: 20px;
  padding: 14px;
  color: #1f2937;
  box-shadow: 0 7px 18px rgba(120,80,30,0.07);
}

.search-result-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 7px;
}

.search-number {
  color: #92400e;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 900;
}

.search-open {
  color: #d97706;
  font-size: 0.78rem;
  font-weight: 900;
}

.search-title {
  font-size: 1rem;
  font-weight: 900;
  line-height: 1.35;
  margin-bottom: 6px;
}

.search-excerpt {
  color: #6b7280;
  font-size: 0.88rem;
  line-height: 1.45;
}

/* ===== V17 recherche modernisée ===== */

.search-page {
  background:
    radial-gradient(circle at top, rgba(245, 158, 11, 0.12), transparent 260px),
    #ffffff;
  min-height: 100vh;
  padding-top: 20px;
}

.search-hero {
  text-align: center;
  margin: 4px auto 18px;
  max-width: 420px;
}

.search-hero h1 {
  margin: 0;
  font-size: 1.55rem;
  color: #1f2937;
  letter-spacing: -0.02em;
}

.search-hero p {
  margin: 8px auto 0;
  color: #6b7280;
  font-size: 0.94rem;
  line-height: 1.45;
  max-width: 340px;
}

.search-panel {
  background: #fffaf0;
  border: 1px solid #e8dccb;
  border-radius: 24px;
  padding: 12px;
  margin-bottom: 14px;
  box-shadow: 0 10px 24px rgba(120,80,30,0.08);
}

.search-input-wrap {
  position: relative;
}

#searchInput {
  width: 100%;
  border: 1px solid #eadfce;
  background: #ffffff;
  color: #1f2937;
  border-radius: 18px;
  padding: 16px 16px;
  font-size: 1rem;
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.8);
}

#searchInput::placeholder {
  color: #a8a29e;
}

#searchInput:focus {
  border-color: #d97706;
  box-shadow: 0 0 0 4px rgba(217,119,6,0.12);
}

.search-help {
  margin-top: 10px;
  color: #8b8171;
  font-size: 0.82rem;
  line-height: 1.4;
  text-align: center;
}

.search-help strong {
  color: #92400e;
}

.search-status {
  color: #8b8171;
  font-size: 0.9rem;
  margin: 0 4px 14px;
  text-align: center;
  font-weight: 700;
}

.search-results {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-bottom: 96px;
}

.search-result {
  display: block;
  text-decoration: none;
  background: #ffffff;
  border: 1px solid #eadfce;
  border-radius: 22px;
  padding: 15px;
  color: #1f2937;
  box-shadow: 0 8px 20px rgba(120,80,30,0.07);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

.search-result:active {
  transform: scale(0.985);
}

.search-result-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.search-number {
  color: #92400e;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 900;
}

.search-open {
  color: #b45309;
  background: #fffbeb;
  border: 1px solid #fde68a;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 900;
}

.search-title {
  font-size: 1.02rem;
  font-weight: 950;
  line-height: 1.35;
  margin-bottom: 7px;
  color: #1f2937;
}

.search-excerpt {
  color: #6b7280;
  font-size: 0.9rem;
  line-height: 1.5;
}

@media (max-width: 380px) {
  .search-hero h1 {
    font-size: 1.38rem;
  }

  .search-panel {
    border-radius: 20px;
  }

  .search-result {
    border-radius: 19px;
  }
}

/* ===== V18 recherche en mode sombre uniquement ===== */

body:has(.search-page) {
  background: #0f172a;
  color: #f9fafb;
}

.search-page {
  background:
    radial-gradient(circle at top, rgba(245, 158, 11, 0.16), transparent 260px),
    linear-gradient(180deg, #0f172a 0%, #111827 100%);
  color: #f9fafb;
  min-height: 100vh;
}

.search-hero h1 {
  color: #f9fafb;
}

.search-hero p {
  color: #cbd5e1;
}

.search-panel {
  background: rgba(31, 41, 55, 0.86);
  border: 1px solid rgba(148, 163, 184, 0.22);
  box-shadow: 0 14px 34px rgba(0,0,0,0.28);
}

#searchInput {
  background: #0f172a;
  color: #f9fafb;
  border-color: rgba(148, 163, 184, 0.28);
  box-shadow: none;
}

#searchInput::placeholder {
  color: #94a3b8;
}

#searchInput:focus {
  border-color: #f59e0b;
  box-shadow: 0 0 0 4px rgba(245,158,11,0.16);
}

.search-help {
  color: #cbd5e1;
}

.search-help strong {
  color: #fbbf24;
}

.search-status {
  color: #cbd5e1;
}

.search-result {
  background: #1f2937;
  border-color: rgba(148, 163, 184, 0.18);
  color: #f9fafb;
  box-shadow: 0 12px 28px rgba(0,0,0,0.24);
}

.search-number {
  color: #fbbf24;
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(251, 191, 36, 0.28);
}

.search-open {
  color: #fef3c7;
  background: rgba(245, 158, 11, 0.14);
  border-color: rgba(251, 191, 36, 0.22);
}

.search-title {
  color: #ffffff;
}

.search-excerpt {
  color: #cbd5e1;
}

body:has(.search-page) .bottom-nav {
  background: #0f172a;
  border-top-color: rgba(148, 163, 184, 0.18);
}

body:has(.search-page) .bottom-nav .nav-item {
  color: #94a3b8;
}

body:has(.search-page) .bottom-nav .nav-item.active {
  color: #fbbf24;
}

/* ===== V19 correction champ recherche sombre ===== */

body:has(.search-page) #searchInput,
.search-page #searchInput {
  color: #ffffff !important;
  background-color: #0f172a !important;
  -webkit-text-fill-color: #ffffff !important;
  caret-color: #fbbf24 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

.search-page #searchInput:focus,
.search-page #searchInput:active {
  color: #ffffff !important;
  background-color: #0f172a !important;
  -webkit-text-fill-color: #ffffff !important;
}

.search-page #searchInput::selection {
  background: rgba(251, 191, 36, 0.35);
  color: #ffffff;
}

.search-page #searchInput:-webkit-autofill,
.search-page #searchInput:-webkit-autofill:hover,
.search-page #searchInput:-webkit-autofill:focus {
  -webkit-text-fill-color: #ffffff !important;
  -webkit-box-shadow: 0 0 0 1000px #0f172a inset !important;
  transition: background-color 9999s ease-in-out 0s;
}

/* ===== V20 recherche sombre adoucie ===== */

body:has(.search-page) {
  background: #243247 !important;
  color: #f9fafb !important;
}

.search-page {
  background:
    radial-gradient(circle at top, rgba(245, 158, 11, 0.13), transparent 300px),
    linear-gradient(180deg, #243247 0%, #334155 100%) !important;
  color: #f9fafb !important;
  min-height: 100vh !important;
}

.search-panel {
  background: rgba(51, 65, 85, 0.82) !important;
  border-color: rgba(226, 232, 240, 0.18) !important;
}

body:has(.search-page) #searchInput,
.search-page #searchInput {
  background-color: #eef2f7 !important;
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
  border-color: rgba(255,255,255,0.34) !important;
  caret-color: #d97706 !important;
}

.search-page #searchInput::placeholder {
  color: #64748b !important;
}

.search-page #searchInput:focus,
.search-page #searchInput:active {
  background-color: #ffffff !important;
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
}

.search-result {
  background: #f8fafc !important;
  color: #111827 !important;
  border-color: rgba(255,255,255,0.38) !important;
  box-shadow: 0 12px 28px rgba(15,23,42,0.18) !important;
}

.search-title {
  color: #111827 !important;
}

.search-excerpt {
  color: #475569 !important;
}

.search-number {
  color: #92400e !important;
  background: #fff7ed !important;
  border-color: #fed7aa !important;
}

.search-open {
  color: #92400e !important;
  background: #fffbeb !important;
  border-color: #fde68a !important;
}

body:has(.search-page) .bottom-nav {
  background: #243247 !important;
  border-top-color: rgba(226,232,240,0.18) !important;
}

body:has(.search-page) .bottom-nav .nav-item {
  color: #cbd5e1 !important;
}

body:has(.search-page) .bottom-nav .nav-item.active {
  color: #fbbf24 !important;
}

/* ===== V21 favoris ===== */

.favorites-page {
  background: #ffffff;
  min-height: 100vh;
  padding-top: 22px;
}

.favorites-head {
  text-align: center;
  margin-bottom: 16px;
}

.favorites-head h1 {
  margin: 0;
  font-size: 1.55rem;
  color: #1f2937;
}

.favorites-head p {
  margin: 8px auto 0;
  max-width: 330px;
  color: #6b7280;
  font-size: 0.94rem;
  line-height: 1.45;
}

.favorites-note {
  background: #fff7ed;
  border: 1px solid #fed7aa;
  color: #92400e;
  border-radius: 18px;
  padding: 12px 14px;
  margin-bottom: 16px;
  font-size: 0.86rem;
  line-height: 1.45;
  text-align: center;
  font-weight: 700;
}

.favorites-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-bottom: 96px;
}

.favorite-card {
  display: flex;
  align-items: stretch;
  gap: 10px;
  background: #fffaf0;
  border: 1px solid #e8dccb;
  border-radius: 22px;
  padding: 10px;
  box-shadow: 0 8px 20px rgba(120,80,30,0.07);
}

.favorite-main {
  flex: 1;
  text-decoration: none;
  color: #1f2937;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 5px 4px;
}

.favorite-recueil {
  width: fit-content;
  color: #92400e;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 999px;
  padding: 4px 9px;
  font-size: 0.74rem;
  font-weight: 900;
}

.favorite-main strong {
  font-size: 1rem;
  line-height: 1.35;
}

.favorite-delete {
  width: 48px;
  border: none;
  border-radius: 16px;
  background: #fee2e2;
  color: #b91c1c;
  font-size: 1rem;
}

.favorites-empty {
  text-align: center;
  color: #9ca3af;
  background: #f9fafb;
  border: 1px dashed #d1d5db;
  border-radius: 20px;
  padding: 28px 16px;
  margin-top: 16px;
  font-weight: 800;
}

/* ===== V22 page Plus ===== */

.plus-page,
.simple-page {
  background: #ffffff;
  min-height: 100vh;
  padding-top: 24px;
}

.plus-head {
  text-align: center;
  margin-bottom: 18px;
}

.plus-head h1,
.simple-page h1 {
  margin: 0;
  color: #1f2937;
  font-size: 1.55rem;
}

.plus-head p {
  margin: 8px auto 0;
  max-width: 330px;
  color: #6b7280;
  font-size: 0.94rem;
  line-height: 1.45;
}

.plus-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-bottom: 96px;
}

.plus-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: #1f2937;
  background: #fffaf0;
  border: 1px solid #e8dccb;
  border-radius: 22px;
  padding: 16px;
  box-shadow: 0 8px 20px rgba(120,80,30,0.07);
}

.plus-card strong {
  display: block;
  font-size: 1.02rem;
  margin-bottom: 5px;
}

.plus-card span:not(.plus-arrow) {
  display: block;
  color: #6b7280;
  font-size: 0.88rem;
  line-height: 1.4;
}

.plus-arrow {
  color: #b45309;
  font-size: 1.8rem;
  font-weight: 300;
}

.support-card {
  background: linear-gradient(180deg, #fff7ed 0%, #ffffff 100%);
  border-color: #fed7aa;
}

.back-link {
  display: inline-block;
  text-decoration: none;
  color: #92400e;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 999px;
  padding: 8px 12px;
  font-weight: 900;
  margin-bottom: 18px;
}

.simple-card {
  background: #fffaf0;
  border: 1px solid #e8dccb;
  border-radius: 22px;
  padding: 16px;
  margin-top: 16px;
  box-shadow: 0 8px 20px rgba(120,80,30,0.07);
  color: #1f2937;
  line-height: 1.55;
}

.simple-card label {
  display: block;
  font-weight: 900;
  margin-bottom: 10px;
}

.simple-card input[type="range"] {
  width: 100%;
}

.simple-card small,
.muted {
  color: #6b7280;
}

.primary-action {
  width: 100%;
  border: none;
  border-radius: 16px;
  background: #d97706;
  color: #ffffff;
  padding: 14px 16px;
  font-weight: 900;
  font-size: 1rem;
  margin-top: 10px;
}

/* ===== V26 identité #006D80 + pages sombres ===== */
:root {
  --brand: #006D80;
  --brand-dark: #005467;
  --brand-soft: #E6F4F6;
  --gold: #F2A900;
  --dark-bg: #073642;
  --dark-bg-2: #0B4A57;
  --dark-card: rgba(255,255,255,0.08);
  --dark-border: rgba(255,255,255,0.16);
}

.recueil-btn.active {
  background: linear-gradient(135deg, var(--brand), var(--brand-dark)) !important;
  color: #fff !important;
  border-color: var(--brand) !important;
  box-shadow: 0 7px 16px rgba(0,109,128,.25) !important;
}

.display { color: var(--brand) !important; }

.keypad .ok,
.play-main {
  background: var(--brand) !important;
  border-color: var(--brand) !important;
  box-shadow: 0 8px 20px rgba(0,109,128,.28) !important;
}

.bottom-nav .nav-item.active { color: var(--brand) !important; }
.fav-btn { color: var(--brand) !important; }

body:has(.search-page),
body:has(.categories-page),
body:has(.favorites-page),
body:has(.plus-page) {
  background: linear-gradient(180deg, var(--dark-bg) 0%, var(--dark-bg-2) 100%) !important;
  color: #f9fafb !important;
}

.search-page,
.categories-page,
.favorites-page,
.plus-page {
  background:
    radial-gradient(circle at top, rgba(242,169,0,.13), transparent 300px),
    linear-gradient(180deg, var(--dark-bg) 0%, var(--dark-bg-2) 100%) !important;
  color: #f9fafb !important;
  min-height: 100vh !important;
}

.search-hero h1,
.categories-head h1,
.favorites-head h1,
.plus-head h1 { color: #fff !important; }

.search-hero p,
.categories-head p,
.favorites-head p,
.plus-head p { color: #d7e7ea !important; }

body:has(.search-page) .bottom-nav,
body:has(.categories-page) .bottom-nav,
body:has(.favorites-page) .bottom-nav,
body:has(.plus-page) .bottom-nav {
  background: var(--dark-bg) !important;
  border-top-color: rgba(255,255,255,.13) !important;
}

body:has(.search-page) .bottom-nav .nav-item,
body:has(.categories-page) .bottom-nav .nav-item,
body:has(.favorites-page) .bottom-nav .nav-item,
body:has(.plus-page) .bottom-nav .nav-item {
  color: #b7d6dc !important;
}

body:has(.search-page) .bottom-nav .nav-item.active,
body:has(.categories-page) .bottom-nav .nav-item.active,
body:has(.favorites-page) .bottom-nav .nav-item.active,
body:has(.plus-page) .bottom-nav .nav-item.active {
  color: var(--gold) !important;
}

.search-panel {
  background: var(--dark-card) !important;
  border-color: var(--dark-border) !important;
  box-shadow: 0 14px 34px rgba(0,0,0,.22) !important;
}

.search-page #searchInput {
  background: #fff !important;
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
  border-color: rgba(255,255,255,.35) !important;
  caret-color: var(--brand) !important;
}

.search-help,
.search-status { color: #d7e7ea !important; }

.search-help strong { color: var(--gold) !important; }

.search-result,
.plus-card,
.favorite-card {
  background: rgba(255,255,255,.96) !important;
  color: #111827 !important;
  border-color: rgba(255,255,255,.35) !important;
}

.search-title { color: #111827 !important; }
.search-excerpt { color: #475569 !important; }

.search-number,
.search-open,
.favorite-recueil {
  color: var(--brand) !important;
  background: var(--brand-soft) !important;
  border-color: rgba(0,109,128,.22) !important;
}

.category-card {
  background: rgba(255,255,255,.08) !important;
  border-color: var(--dark-border) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.18) !important;
}

.category-toggle {
  background: rgba(255,255,255,.08) !important;
  color: #fff !important;
}

.category-card.open { border-color: var(--gold) !important; }

.category-card.open .category-toggle {
  background: linear-gradient(135deg, var(--brand), var(--brand-dark)) !important;
  color: #fff !important;
}

.category-content { background: rgba(255,255,255,.06) !important; }

.subcategory {
  background: rgba(255,255,255,.94) !important;
  border-color: rgba(255,255,255,.20) !important;
}

.subcategory-toggle { color: #1f2937 !important; }

.subcategory.open { border-color: var(--gold) !important; }

.subcategory.open .subcategory-toggle {
  background: #fff7ed !important;
  color: #92400e !important;
}

.chants-list { background: #fff7ed !important; }

.chant-row {
  color: var(--brand) !important;
  background: #fff !important;
  border-color: rgba(0,109,128,.16) !important;
}

.empty-sub {
  background: rgba(255,255,255,.82) !important;
  color: #64748b !important;
}

.show-all-categories {
  background: var(--brand-soft) !important;
  border-color: rgba(0,109,128,.22) !important;
  color: var(--brand) !important;
}

.favorites-note {
  background: rgba(255,255,255,.08) !important;
  border-color: var(--dark-border) !important;
  color: #d7e7ea !important;
}

.favorites-empty {
  background: rgba(255,255,255,.08) !important;
  color: #d7e7ea !important;
  border-color: rgba(255,255,255,.20) !important;
}

.plus-arrow { color: var(--brand) !important; }

.support-card {
  background: linear-gradient(180deg,#fff 0%, var(--brand-soft) 100%) !important;
  border-color: rgba(0,109,128,.22) !important;
}

/* ===== V29 correction player + nettoyage JSON ===== */
.small-control {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.small-control span {
  display: none !important;
}

.small-control i {
  margin: 0 !important;
}

/* ===== V31 harmonisation barre de progression player ===== */
#progress {
  accent-color: #006D80 !important;
}

#progress::-webkit-slider-runnable-track {
  background: #E6F4F6 !important;
  border-radius: 999px !important;
}

#progress::-webkit-slider-thumb {
  background: #006D80 !important;
}

#progress::-moz-range-track {
  background: #E6F4F6 !important;
  border-radius: 999px !important;
}

#progress::-moz-range-progress {
  background: #006D80 !important;
}

#progress::-moz-range-thumb {
  background: #006D80 !important;
  border: none !important;
}

/* ===== V32 player plus net + barre fine ===== */

.modern-player {
  box-shadow: none !important;
  border: 1px solid #e5e7eb !important;
}

/* Range fin et propre */
#progress {
  width: 100% !important;
  height: 4px !important;
  accent-color: #006D80 !important;
  background: transparent !important;
}

/* Chrome / Safari */
#progress::-webkit-slider-runnable-track {
  height: 4px !important;
  background: #d7eef2 !important;
  border-radius: 999px !important;
}

#progress::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 14px !important;
  height: 14px !important;
  border-radius: 50% !important;
  background: #006D80 !important;
  border: 2px solid #ffffff !important;
  margin-top: -5px !important;
  box-shadow: none !important;
}

/* Firefox */
#progress::-moz-range-track {
  height: 4px !important;
  background: #d7eef2 !important;
  border-radius: 999px !important;
}

#progress::-moz-range-progress {
  height: 4px !important;
  background: #006D80 !important;
  border-radius: 999px !important;
}

#progress::-moz-range-thumb {
  width: 14px !important;
  height: 14px !important;
  border-radius: 50% !important;
  background: #006D80 !important;
  border: 2px solid #ffffff !important;
  box-shadow: none !important;
}

.progress-wrap {
  margin-bottom: 8px !important;
}

/* ===== V33 réglages taille paroles + mode clair/sombre ===== */

/* Taille des paroles */
html[data-font-size="small"] .lyrics {
  font-size: 15px !important;
}

html[data-font-size="normal"] .lyrics {
  font-size: 20px !important;
}

html[data-font-size="large"] .lyrics {
  font-size: 23px !important;
}

html[data-font-size="xlarge"] .lyrics {
  font-size: 25px !important;
}

/* Réglages */
.settings-card {
  background: rgba(255,255,255,.96);
  color: #111827;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 18px;
  padding: 16px;
  margin: 14px 0;
}

.settings-title {
  font-weight: 800;
  margin-bottom: 12px;
  color: #0f172a;
}

.settings-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.settings-options button {
  border: 1px solid rgba(0,109,128,.22);
  background: #E6F4F6;
  color: #006D80;
  border-radius: 14px;
  padding: 12px 10px;
  font-weight: 800;
}

.settings-options button.active {
  background: #006D80;
  color: #ffffff;
  border-color: #006D80;
}

.settings-note {
  color: #64748b;
  font-size: .9rem;
  margin-top: 12px;
}

/* Mode sombre optionnel pour Accueil + Parole */
html[data-theme="dark"] body:has(.home-page),
html[data-theme="dark"] body:has(.chant-page) {
  background: #073642 !important;
  color: #f9fafb !important;
}

html[data-theme="dark"] .home-page,
html[data-theme="dark"] .chant-page {
  background:
    radial-gradient(circle at top, rgba(242,169,0,.10), transparent 320px),
    linear-gradient(180deg, #073642 0%, #0B4A57 100%) !important;
  color: #f9fafb !important;
}

html[data-theme="dark"] .chant-simple-header h1,
html[data-theme="dark"] .lyrics,
html[data-theme="dark"] .verse {
  color: #f9fafb !important;
}

html[data-theme="dark"] .chant-simple-header,
html[data-theme="dark"] .modern-player,
html[data-theme="dark"] .bottom-nav {
  background: #073642 !important;
  border-color: rgba(255,255,255,.14) !important;
}

html[data-theme="dark"] .modern-player {
  color: #f9fafb !important;
}

html[data-theme="dark"] .bottom-nav .nav-item {
  color: #b7d6dc !important;
}

html[data-theme="dark"] .bottom-nav .nav-item.active {
  color: #F2A900 !important;
}

html[data-theme="dark"] .display-card,
html[data-theme="dark"] .keypad,
html[data-theme="dark"] .recueil-selector,
html[data-theme="dark"] .title-preview {
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.14) !important;
  color: #f9fafb !important;
}

html[data-theme="dark"] .display,
html[data-theme="dark"] .preview-title {
  color: #ffffff !important;
}

html[data-theme="dark"] .key {
  background: rgba(255,255,255,.94) !important;
  color: #111827 !important;
}

html[data-theme="dark"] .keypad .ok {
  background: #006D80 !important;
  color: #ffffff !important;
}

/* ===== V34 mode sombre gris plus doux ===== */

/* On remplace le sombre vert par un gris propre */
html[data-theme="dark"] body:has(.home-page),
html[data-theme="dark"] body:has(.chant-page) {
  background: #1f2937 !important;
  color: #f9fafb !important;
}

html[data-theme="dark"] .home-page,
html[data-theme="dark"] .chant-page {
  background:
    radial-gradient(circle at top, rgba(255,255,255,0.05), transparent 280px),
    linear-gradient(180deg, #1f2937 0%, #111827 100%) !important;
  color: #f9fafb !important;
}

/* Page parole sombre : pas de cadres blancs */
html[data-theme="dark"] .lyrics {
  color: #f9fafb !important;
}

html[data-theme="dark"] .verse {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #f9fafb !important;
}

/* En-tête parole */
html[data-theme="dark"] .chant-simple-header {
  background: transparent !important;
  border-bottom: 1px solid rgba(255,255,255,0.10) !important;
}

html[data-theme="dark"] .chant-simple-header h1 {
  color: #f9fafb !important;
}

/* Boutons retour et favori en sombre */
html[data-theme="dark"] .back-btn,
html[data-theme="dark"] .fav-btn {
  background: #374151 !important;
  border-color: #4b5563 !important;
  color: #f9fafb !important;
}

/* Player sombre gris, plus neutre */
html[data-theme="dark"] .modern-player {
  background: #1f2937 !important;
  border-color: #374151 !important;
  color: #f9fafb !important;
  box-shadow: none !important;
}

/* Bouton play en gris/ardoise au lieu du vert */
html[data-theme="dark"] .play-main {
  background: #4b5563 !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

/* Boutons début/fin */
html[data-theme="dark"] .small-control {
  color: #e5e7eb !important;
  background: transparent !important;
}

/* Barre de progression sombre */
html[data-theme="dark"] #progress {
  accent-color: #9ca3af !important;
}

html[data-theme="dark"] #progress::-webkit-slider-runnable-track {
  background: #374151 !important;
}

html[data-theme="dark"] #progress::-webkit-slider-thumb {
  background: #d1d5db !important;
  border-color: #1f2937 !important;
}

html[data-theme="dark"] #progress::-moz-range-track {
  background: #374151 !important;
}

html[data-theme="dark"] #progress::-moz-range-progress {
  background: #d1d5db !important;
}

html[data-theme="dark"] #progress::-moz-range-thumb {
  background: #d1d5db !important;
  border-color: #1f2937 !important;
}

/* Menu bas sombre gris */
html[data-theme="dark"] .bottom-nav {
  background: #111827 !important;
  border-top-color: #374151 !important;
}

html[data-theme="dark"] .bottom-nav .nav-item {
  color: #9ca3af !important;
}

html[data-theme="dark"] .bottom-nav .nav-item.active {
  color: #e5e7eb !important;
}

/* Accueil sombre gris : clavier plus lisible */
html[data-theme="dark"] .recueil-tabs {
  background: #111827 !important;
  border-color: #374151 !important;
}

html[data-theme="dark"] .recueil-btn {
  background: transparent !important;
  color: #d1d5db !important;
}

html[data-theme="dark"] .recueil-btn.active {
  background: #4b5563 !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .display {
  background: #111827 !important;
  border-color: #374151 !important;
  color: #f9fafb !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .display.empty {
  color: #6b7280 !important;
}

html[data-theme="dark"] .preview-title {
  color: #f9fafb !important;
}

html[data-theme="dark"] .keypad button {
  background: #374151 !important;
  border-color: #4b5563 !important;
  color: #f9fafb !important;
  box-shadow: none !important;
}

html[data-theme="dark"] #backspace {
  background: #3f2a2a !important;
  color: #fecaca !important;
  border-color: #7f1d1d !important;
}

html[data-theme="dark"] .keypad .ok {
  background: #4b5563 !important;
  border-color: #6b7280 !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

/* Nettoyage des anciennes règles sombres trop vertes */
html[data-theme="dark"] .key {
  background: #374151 !important;
  color: #f9fafb !important;
}

/* ===== V35 mode sombre uniquement pour page parole/player ===== */

/* Annule tout effet sombre sur la page d'accueil */
html[data-theme="dark"] body:has(.home-page),
html[data-theme="dark"] .home-page {
  background: #f8fafc !important;
  color: #111827 !important;
}

html[data-theme="dark"] .home-page .recueil-tabs,
html[data-theme="dark"] .home-page .recueil-selector,
html[data-theme="dark"] .home-page .display-card,
html[data-theme="dark"] .home-page .keypad,
html[data-theme="dark"] .home-page .title-preview {
  background: #ffffff !important;
  border-color: #e5e7eb !important;
  color: #111827 !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .home-page .recueil-btn {
  background: transparent !important;
  color: #475569 !important;
}

html[data-theme="dark"] .home-page .recueil-btn.active {
  background: linear-gradient(135deg, #006D80, #005467) !important;
  color: #ffffff !important;
  border-color: #006D80 !important;
  box-shadow: 0 7px 16px rgba(0,109,128,.25) !important;
}

html[data-theme="dark"] .home-page .display {
  background: #ffffff !important;
  color: #006D80 !important;
  border-color: #e5e7eb !important;
}

html[data-theme="dark"] .home-page .display.empty {
  color: #94a3b8 !important;
}

html[data-theme="dark"] .home-page .preview-title {
  color: #0f172a !important;
}

html[data-theme="dark"] .home-page .key,
html[data-theme="dark"] .home-page .keypad button {
  background: #ffffff !important;
  border-color: #e5e7eb !important;
  color: #111827 !important;
  box-shadow: 0 2px 8px rgba(15,23,42,.06) !important;
}

html[data-theme="dark"] .home-page #backspace {
  background: #fff1f2 !important;
  color: #be123c !important;
  border-color: #fecdd3 !important;
}

html[data-theme="dark"] .home-page .keypad .ok {
  background: #006D80 !important;
  border-color: #006D80 !important;
  color: #ffffff !important;
  box-shadow: 0 8px 20px rgba(0,109,128,.28) !important;
}

/* Menu bas de l'accueil reste clair */
html[data-theme="dark"] body:has(.home-page) .bottom-nav,
html[data-theme="dark"] .home-page ~ .bottom-nav {
  background: #ffffff !important;
  border-top-color: #e5e7eb !important;
}

html[data-theme="dark"] body:has(.home-page) .bottom-nav .nav-item,
html[data-theme="dark"] .home-page ~ .bottom-nav .nav-item {
  color: #64748b !important;
}

html[data-theme="dark"] body:has(.home-page) .bottom-nav .nav-item.active,
html[data-theme="dark"] .home-page ~ .bottom-nav .nav-item.active {
  color: #006D80 !important;
}

/* ===== V36 mode sombre gris harmonisé sauf accueil ===== */

/* Pages secondaires en gris sombre */
html[data-theme="dark"] body:has(.search-page),
html[data-theme="dark"] body:has(.categories-page),
html[data-theme="dark"] body:has(.favorites-page),
html[data-theme="dark"] body:has(.plus-page),
html[data-theme="dark"] body:has(.settings-page) {
  background: #111827 !important;
  color: #f9fafb !important;
}

html[data-theme="dark"] .search-page,
html[data-theme="dark"] .categories-page,
html[data-theme="dark"] .favorites-page,
html[data-theme="dark"] .plus-page,
html[data-theme="dark"] .settings-page {
  background:
    radial-gradient(circle at top, rgba(255,255,255,0.05), transparent 280px),
    linear-gradient(180deg, #1f2937 0%, #111827 100%) !important;
  color: #f9fafb !important;
}

/* Titres */
html[data-theme="dark"] .search-hero h1,
html[data-theme="dark"] .categories-head h1,
html[data-theme="dark"] .favorites-head h1,
html[data-theme="dark"] .plus-head h1 {
  color: #ffffff !important;
}

html[data-theme="dark"] .search-hero p,
html[data-theme="dark"] .categories-head p,
html[data-theme="dark"] .favorites-head p,
html[data-theme="dark"] .plus-head p {
  color: #d1d5db !important;
}

/* Menu bas sur pages secondaires */
html[data-theme="dark"] body:not(:has(.home-page)) .bottom-nav {
  background: #111827 !important;
  border-top-color: #374151 !important;
}

html[data-theme="dark"] body:not(:has(.home-page)) .bottom-nav .nav-item {
  color: #9ca3af !important;
}

html[data-theme="dark"] body:not(:has(.home-page)) .bottom-nav .nav-item.active {
  color: #e5e7eb !important;
}

/* Recherche */
html[data-theme="dark"] .search-panel {
  background: #1f2937 !important;
  border-color: #374151 !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .search-page #searchInput {
  background: #f9fafb !important;
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
  border-color: #d1d5db !important;
}

html[data-theme="dark"] .search-help,
html[data-theme="dark"] .search-status {
  color: #d1d5db !important;
}

html[data-theme="dark"] .search-help strong {
  color: #f9fafb !important;
}

html[data-theme="dark"] .search-result {
  background: #f9fafb !important;
  color: #111827 !important;
  border-color: #e5e7eb !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .search-number,
html[data-theme="dark"] .search-open {
  color: #374151 !important;
  background: #e5e7eb !important;
  border-color: #d1d5db !important;
}

/* Catégories */
html[data-theme="dark"] .category-card {
  background: #1f2937 !important;
  border-color: #374151 !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .category-toggle {
  background: #1f2937 !important;
  color: #f9fafb !important;
}

html[data-theme="dark"] .category-card.open {
  border-color: #6b7280 !important;
}

html[data-theme="dark"] .category-card.open .category-toggle {
  background: #374151 !important;
  color: #ffffff !important;
}

html[data-theme="dark"] .category-content {
  background: #111827 !important;
}

html[data-theme="dark"] .subcategory {
  background: #f9fafb !important;
  border-color: #e5e7eb !important;
}

html[data-theme="dark"] .subcategory-toggle {
  color: #111827 !important;
}

html[data-theme="dark"] .subcategory.open {
  border-color: #9ca3af !important;
}

html[data-theme="dark"] .subcategory.open .subcategory-toggle {
  background: #e5e7eb !important;
  color: #111827 !important;
}

html[data-theme="dark"] .chants-list {
  background: #f3f4f6 !important;
}

html[data-theme="dark"] .chant-row {
  color: #374151 !important;
  background: #ffffff !important;
  border-color: #e5e7eb !important;
}

html[data-theme="dark"] .show-all-categories {
  background: #e5e7eb !important;
  color: #374151 !important;
  border-color: #d1d5db !important;
}

/* Favoris */
html[data-theme="dark"] .favorites-note {
  background: #1f2937 !important;
  border-color: #374151 !important;
  color: #d1d5db !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .favorite-card {
  background: #f9fafb !important;
  color: #111827 !important;
  border-color: #e5e7eb !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .favorite-recueil {
  color: #374151 !important;
  background: #e5e7eb !important;
  border-color: #d1d5db !important;
}

html[data-theme="dark"] .favorites-empty {
  background: #1f2937 !important;
  color: #d1d5db !important;
  border-color: #374151 !important;
}

/* Plus / Réglages */
html[data-theme="dark"] .plus-card,
html[data-theme="dark"] .settings-card {
  background: #f9fafb !important;
  color: #111827 !important;
  border-color: #e5e7eb !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .plus-arrow {
  color: #4b5563 !important;
}

html[data-theme="dark"] .settings-title {
  color: #111827 !important;
}

html[data-theme="dark"] .settings-options button {
  background: #e5e7eb !important;
  color: #374151 !important;
  border-color: #d1d5db !important;
}

html[data-theme="dark"] .settings-options button.active {
  background: #4b5563 !important;
  color: #ffffff !important;
  border-color: #4b5563 !important;
}

html[data-theme="dark"] .settings-note {
  color: #6b7280 !important;
}

html[data-theme="dark"] .support-card {
  background: #f9fafb !important;
  border-color: #e5e7eb !important;
}

/* ===== V37 anti-cache ===== */
.settings-refresh-btn {
  width: 100%;
  border: 1px solid #006D80;
  background: #006D80;
  color: #ffffff;
  border-radius: 14px;
  padding: 13px 12px;
  font-weight: 800;
  margin-top: 12px;
}

html[data-theme="dark"] .settings-refresh-btn {
  background: #4b5563 !important;
  border-color: #4b5563 !important;
  color: #ffffff !important;
}

/* ===== V40 accueil : clavier moins imposant ===== */

.home-page {
  padding-top: 14px !important;
}

.keypad-card {
  max-width: 390px !important;
  padding: 14px !important;
}

.recueil-tabs {
  margin-bottom: 12px !important;
}

.recueil-btn {
  padding: 9px 10px !important;
  font-size: 0.88rem !important;
}

.display {
  height: 58px !important;
  font-size: 2rem !important;
  margin-bottom: 8px !important;
}

.preview-wrap {
  min-height: 34px !important;
  margin-bottom: 10px !important;
}

.preview-title {
  font-size: 0.96rem !important;
}

.keypad {
  gap: 9px !important;
}

.keypad button {
  min-height: 52px !important;
  height: 52px !important;
  font-size: 1.18rem !important;
  border-radius: 15px !important;
}

.keypad .ok {
  font-size: 1rem !important;
}

.message {
  min-height: 22px !important;
  margin-top: 8px !important;
}

/* Petits écrans en hauteur */
@media (max-height: 700px) {
  .home-page {
    padding-top: 8px !important;
  }

  .keypad-card {
    padding: 12px !important;
  }

  .display {
    height: 52px !important;
    font-size: 1.8rem !important;
  }

  .preview-wrap {
    min-height: 28px !important;
    margin-bottom: 8px !important;
  }

  .keypad {
    gap: 7px !important;
  }

  .keypad button {
    min-height: 46px !important;
    height: 46px !important;
    font-size: 1.05rem !important;
    border-radius: 13px !important;
  }

  .recueil-btn {
    padding: 8px 8px !important;
    font-size: 0.82rem !important;
  }
}

/* Très petits écrans */
@media (max-height: 620px) {
  .display {
    height: 46px !important;
    font-size: 1.55rem !important;
  }

  .keypad button {
    min-height: 42px !important;
    height: 42px !important;
    font-size: 1rem !important;
  }

  .preview-title {
    font-size: 0.88rem !important;
  }
}

/* ===== V41 accueil : titre mieux centré entre numéro et clavier ===== */

.display {
  margin-bottom: 0 !important;
}

.preview-wrap {
  min-height: 42px !important;
  margin-top: 10px !important;
  margin-bottom: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.preview-title {
  text-align: center !important;
  line-height: 1.25 !important;
  max-width: 95% !important;
}

/* Petits écrans : garder l'espace mais sans trop agrandir */
@media (max-height: 700px) {
  .preview-wrap {
    min-height: 34px !important;
    margin-top: 8px !important;
    margin-bottom: 10px !important;
  }
}

@media (max-height: 620px) {
  .preview-wrap {
    min-height: 30px !important;
    margin-top: 6px !important;
    margin-bottom: 8px !important;
  }
}

/* ===== V42 accueil : titre vraiment décollé du numéro ===== */

.home-page .display {
  margin-bottom: 0 !important;
}

.home-page .preview-wrap {
  min-height: 58px !important;
  margin-top: 18px !important;
  margin-bottom: 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.home-page .preview-title {
  text-align: center !important;
  line-height: 1.3 !important;
  max-width: 92% !important;
}

/* On évite que les anciennes règles compactes recollent le titre */
@media (max-height: 700px) {
  .home-page .preview-wrap {
    min-height: 46px !important;
    margin-top: 14px !important;
    margin-bottom: 14px !important;
  }
}

@media (max-height: 620px) {
  .home-page .preview-wrap {
    min-height: 38px !important;
    margin-top: 10px !important;
    margin-bottom: 10px !important;
  }
}

/* ===== V43 accueil : rééquilibrage numéro / titre / clavier ===== */

/* On descend un peu le bloc numéro par rapport aux types de chants */
.home-page .recueil-tabs {
  margin-bottom: 18px !important;
}

/* Numéro moins imposant et mieux adapté au clavier */
.home-page .display {
  height: 50px !important;
  font-size: 1.7rem !important;
  margin-bottom: 0 !important;
  border-radius: 16px !important;
}

/* Titre entre numéro et clavier, mais sans trop grand vide */
.home-page .preview-wrap {
  min-height: 38px !important;
  margin-top: 9px !important;
  margin-bottom: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.home-page .preview-title {
  font-size: 0.94rem !important;
  line-height: 1.25 !important;
  text-align: center !important;
  max-width: 94% !important;
}

/* Le clavier garde le format compact */
.home-page .keypad {
  gap: 8px !important;
}

.home-page .keypad button {
  min-height: 50px !important;
  height: 50px !important;
  font-size: 1.12rem !important;
  border-radius: 14px !important;
}

.home-page .keypad .ok {
  font-size: .96rem !important;
}

/* Petits écrans */
@media (max-height: 700px) {
  .home-page .recueil-tabs {
    margin-bottom: 14px !important;
  }

  .home-page .display {
    height: 46px !important;
    font-size: 1.55rem !important;
  }

  .home-page .preview-wrap {
    min-height: 32px !important;
    margin-top: 7px !important;
    margin-bottom: 8px !important;
  }

  .home-page .keypad button {
    min-height: 44px !important;
    height: 44px !important;
    font-size: 1rem !important;
  }
}

@media (max-height: 620px) {
  .home-page .recueil-tabs {
    margin-bottom: 10px !important;
  }

  .home-page .display {
    height: 42px !important;
    font-size: 1.42rem !important;
  }

  .home-page .preview-wrap {
    min-height: 28px !important;
    margin-top: 5px !important;
    margin-bottom: 6px !important;
  }

  .home-page .preview-title {
    font-size: 0.86rem !important;
  }

  .home-page .keypad button {
    min-height: 40px !important;
    height: 40px !important;
    font-size: .95rem !important;
  }
}

/* ===== V44 réglage final accueil : numéro / titre / clavier ===== */

/* On force la page d'accueil à se comporter comme un bloc propre */
body .home-page {
  padding-top: 18px !important;
}

body .home-page .keypad-card {
  display: flex !important;
  flex-direction: column !important;
  max-width: 390px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 14px !important;
}

/* Plus d'espace entre les types de chants et le numéro */
body .home-page .recueil-tabs {
  margin-bottom: 26px !important;
}

/* Numéro plus petit et plus net */
body .home-page #numberDisplay.display {
  height: 48px !important;
  min-height: 48px !important;
  padding: 0 16px !important;
  margin: 0 auto !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  font-size: 1.55rem !important;
  line-height: 1 !important;
  border-radius: 16px !important;
}

/* La zone titre devient une vraie zone fixe entre numéro et clavier */
body .home-page .preview-wrap {
  height: 54px !important;
  min-height: 54px !important;
  max-height: 54px !important;

  margin: 6px 0 8px 0 !important;
  padding: 0 10px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Le titre est centré dans cette zone, pas collé sous le numéro */
body .home-page #previewTitle.preview-title {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: 340px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  text-align: center !important;
  font-size: 0.94rem !important;
  line-height: 1.25 !important;
  font-weight: 800 !important;
}

/* Le clavier commence juste après la zone du titre */
body .home-page .keypad {
  margin-top: 0 !important;
  gap: 8px !important;
}

body .home-page .keypad button {
  height: 50px !important;
  min-height: 50px !important;
  border-radius: 14px !important;
}

/* iPhone / petits écrans */
@media (max-height: 700px) {
  body .home-page {
    padding-top: 12px !important;
  }

  body .home-page .recueil-tabs {
    margin-bottom: 22px !important;
  }

  body .home-page #numberDisplay.display {
    height: 44px !important;
    min-height: 44px !important;
    font-size: 1.45rem !important;
  }

  body .home-page .preview-wrap {
    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
    margin: 5px 0 7px 0 !important;
  }

  body .home-page .keypad button {
    height: 44px !important;
    min-height: 44px !important;
  }
}

@media (max-height: 620px) {
  body .home-page .recueil-tabs {
    margin-bottom: 18px !important;
  }

  body .home-page #numberDisplay.display {
    height: 40px !important;
    min-height: 40px !important;
    font-size: 1.35rem !important;
  }

  body .home-page .preview-wrap {
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    margin: 4px 0 6px 0 !important;
  }

  body .home-page #previewTitle.preview-title {
    font-size: 0.86rem !important;
  }

  body .home-page .keypad button {
    height: 40px !important;
    min-height: 40px !important;
  }
}
.chant-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.chant-simple-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.chant-simple-header h1 {
  flex: 1;
  min-width: 0;
}

.chant-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.fav-btn {
  width: 40px;
  height: 40px;

  display: flex;
  align-items: center;
  justify-content: center;

  border: none;
  border-radius: 50%;

  background: rgba(255,255,255,0.08);
  color: white;

  font-size: 1rem;
}
.chant-simple-header {
  display: grid !important;
  grid-template-columns: 42px 1fr 92px !important;
  align-items: center !important;
  gap: 8px !important;
}

.chant-simple-header h1 {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  text-align: center !important;
  font-size: 1rem !important;
}

.chant-actions {
  display: flex !important;
  justify-content: flex-end !important;
  gap: 6px !important;
  width: 92px !important;
  flex-shrink: 0 !important;
}

.chant-actions .fav-btn {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  padding: 0 !important;
}
/* ===== V45 ACCUEIL — 3 recueils modernisés, légers ===== */
.home-page .recueil-tabs {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 9px !important;
  max-width: 390px !important;
  margin: 0 auto 27px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.home-page .recueil-btn {
  min-height: 54px !important;
  padding: 10px 7px !important;
  border: 1px solid #e3d9ca !important;
  border-top: 3px solid #b8a995 !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.82) !important;
  color: #655c50 !important;
  font-size: 0.88rem !important;
  font-weight: 850 !important;
  line-height: 1.05 !important;
  letter-spacing: 0 !important;
  box-shadow: 0 4px 12px rgba(76, 60, 38, 0.055) !important;
  transition: transform 0.10s ease, border-color 0.15s ease, background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease !important;
}

.home-page .recueil-btn[data-recueil="ffpm"] {
  border-top-color: #2563eb !important;
}

.home-page .recueil-btn[data-recueil="fanampiny"] {
  border-top-color: #16856f !important;
}

.home-page .recueil-btn[data-recueil="antema"] {
  border-top-color: #9f3f53 !important;
}

.home-page .recueil-btn:active {
  transform: scale(0.97) !important;
}

.home-page .recueil-btn.active {
  color: #ffffff !important;
  border-color: #2563eb !important;
  border-top-color: #2563eb !important;
  background: #2563eb !important;
  box-shadow: 0 7px 16px rgba(37, 99, 235, 0.19) !important;
}

.home-page .recueil-btn[data-recueil="fanampiny"].active {
  border-color: #16856f !important;
  border-top-color: #16856f !important;
  background: #16856f !important;
  box-shadow: 0 7px 16px rgba(22, 133, 111, 0.18) !important;
}

.home-page .recueil-btn[data-recueil="antema"].active {
  border-color: #9f3f53 !important;
  border-top-color: #9f3f53 !important;
  background: #9f3f53 !important;
  box-shadow: 0 7px 16px rgba(159, 63, 83, 0.18) !important;
}

html[data-theme="dark"] .home-page .recueil-tabs {
  background: transparent !important;
  border: 0 !important;
}

html[data-theme="dark"] .home-page .recueil-btn {
  background: #161d29 !important;
  border-color: #374151 !important;
  color: #d1d5db !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .home-page .recueil-btn[data-recueil="ffpm"] {
  border-top-color: #60a5fa !important;
}

html[data-theme="dark"] .home-page .recueil-btn[data-recueil="fanampiny"] {
  border-top-color: #4fd1b5 !important;
}

html[data-theme="dark"] .home-page .recueil-btn[data-recueil="antema"] {
  border-top-color: #e58a9d !important;
}

html[data-theme="dark"] .home-page .recueil-btn.active {
  background: #4b5563 !important;
  border-color: #6b7280 !important;
  color: #ffffff !important;
}

@media (max-width: 380px) {
  .home-page .recueil-tabs {
    gap: 7px !important;
  }

  .home-page .recueil-btn {
    min-height: 50px !important;
    padding: 9px 4px !important;
    font-size: 0.79rem !important;
  }
}


/* ===== V46 ACCUEIL — 3 recueils façon couvertures, légers et familiers ===== */
/* Uniquement l'apparence des trois choix FFPM / Fanampiny / Antema */
.home-page .recueil-tabs {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
  width: 100% !important;
  max-width: 390px !important;
  margin: 0 auto 26px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.home-page .recueil-btn {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  min-width: 0 !important;
  min-height: 104px !important;
  padding: 16px 7px 14px !important;
  border: 1px solid rgba(255,255,255,.55) !important;
  border-radius: 9px !important;
  color: #ffffff !important;
  font-size: .93rem !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
  letter-spacing: .2px !important;
  text-shadow: 0 1px 3px rgba(0,0,0,.28) !important;
  box-shadow: 0 5px 12px rgba(15,23,42,.14) !important;
  transition: transform .10s ease, box-shadow .14s ease, filter .14s ease !important;
}

/* Petit motif abstrait : aucun fichier image supplémentaire */
.home-page .recueil-btn::before {
  content: "" !important;
  position: absolute !important;
  z-index: -1 !important;
  width: 84px !important;
  height: 150px !important;
  top: -30px !important;
  right: -25px !important;
  transform: rotate(28deg) !important;
  background: rgba(255,255,255,.17) !important;
  border-left: 1px solid rgba(255,255,255,.18) !important;
}

.home-page .recueil-btn[data-recueil="ffpm"] {
  background:
    radial-gradient(circle at 22% 20%, rgba(255,255,255,.32) 0 13%, transparent 14%),
    linear-gradient(145deg, #f973b1 0%, #d946a3 47%, #7c3aed 100%) !important;
}

.home-page .recueil-btn[data-recueil="fanampiny"] {
  background:
    linear-gradient(135deg, transparent 0 28%, rgba(77,208,225,.38) 29% 46%, transparent 47%),
    linear-gradient(145deg, #0f4c81 0%, #1766a0 48%, #0891b2 100%) !important;
}

.home-page .recueil-btn[data-recueil="antema"] {
  background:
    linear-gradient(55deg, transparent 0 42%, rgba(245,158,11,.95) 43% 52%, transparent 53%),
    linear-gradient(145deg, #37474f 0%, #2f4f4f 50%, #263238 100%) !important;
}

.home-page .recueil-btn:active {
  transform: scale(.97) !important;
  box-shadow: 0 2px 7px rgba(15,23,42,.16) !important;
}

/* Sélection visible sans modifier la logique */
.home-page .recueil-btn.active {
  border: 3px solid #ffffff !important;
  outline: 2px solid var(--brand, #006D80) !important;
  outline-offset: 2px !important;
  box-shadow: 0 7px 16px rgba(0,109,128,.22) !important;
  filter: saturate(1.08) brightness(1.03) !important;
}

/* Les anciennes règles de thème sombre ne doivent pas griser les couvertures */
html[data-theme="dark"] .home-page .recueil-btn,
html[data-theme="dark"] .home-page .recueil-btn.active {
  color: #ffffff !important;
}
html[data-theme="dark"] .home-page .recueil-btn[data-recueil="ffpm"] {
  background:
    radial-gradient(circle at 22% 20%, rgba(255,255,255,.32) 0 13%, transparent 14%),
    linear-gradient(145deg, #f973b1 0%, #d946a3 47%, #7c3aed 100%) !important;
}
html[data-theme="dark"] .home-page .recueil-btn[data-recueil="fanampiny"] {
  background:
    linear-gradient(135deg, transparent 0 28%, rgba(77,208,225,.38) 29% 46%, transparent 47%),
    linear-gradient(145deg, #0f4c81 0%, #1766a0 48%, #0891b2 100%) !important;
}
html[data-theme="dark"] .home-page .recueil-btn[data-recueil="antema"] {
  background:
    linear-gradient(55deg, transparent 0 42%, rgba(245,158,11,.95) 43% 52%, transparent 53%),
    linear-gradient(145deg, #37474f 0%, #2f4f4f 50%, #263238 100%) !important;
}

@media (max-width: 380px) {
  .home-page .recueil-tabs {
    gap: 7px !important;
  }

  .home-page .recueil-btn {
    min-height: 92px !important;
    padding: 13px 5px 12px !important;
    font-size: .80rem !important;
    border-radius: 8px !important;
  }
}

/* =========================================================
   V47 — PAGE CHANT + PLAYER MODERNE, LÉGER ET MOBILE
   ========================================================= */

/* La page garde un grand espace sous les paroles pour ne jamais être masquée
   par le lecteur fixe et la navigation. */
.chant-page-v47 {
  max-width: 760px !important;
  padding-top: 14px !important;
  padding-bottom: 245px !important;
}

.chant-header-v47 {
  position: sticky !important;
  top: 0 !important;
  z-index: 80 !important;
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) 88px !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 -6px 20px !important;
  padding: 8px 6px 12px !important;
  background: rgba(255,255,255,.95) !important;
  border-bottom: 1px solid #e7ecee !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

.chant-heading {
  min-width: 0 !important;
  text-align: center !important;
}

.chant-recueil-label {
  display: inline-block !important;
  margin-bottom: 3px !important;
  color: #006D80 !important;
  font-size: .66rem !important;
  font-weight: 900 !important;
  letter-spacing: .12em !important;
  line-height: 1 !important;
}

.chant-header-v47 .chant-heading h1,
.chant-header-v47 #chantTitle {
  margin: 0 !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: #172a30 !important;
  font-size: 1.02rem !important;
  font-weight: 900 !important;
  line-height: 1.25 !important;
  text-align: center !important;
}

.chant-header-v47 .back-btn,
.chant-header-v47 .fav-btn {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid #dbe5e7 !important;
  border-radius: 12px !important;
  background: #f7fbfb !important;
  color: #006D80 !important;
  box-shadow: none !important;
  font-size: .96rem !important;
}

.chant-header-v47 .chant-actions {
  width: 88px !important;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 6px !important;
}

.chant-header-v47 .fav-btn.is-active {
  color: #d64067 !important;
  background: #fff4f7 !important;
  border-color: #f4cbd6 !important;
}

.chant-header-v47 .fav-btn.is-downloaded {
  color: #167455 !important;
  background: #eefaf5 !important;
  border-color: #c8eadc !important;
}

.chant-page-v47 .lyrics {
  max-width: 680px !important;
  margin: 0 auto !important;
  padding: 0 4px !important;
  text-align: center !important;
  color: #1c2b30 !important;
  line-height: 1.72 !important;
}

.chant-page-v47 .verse {
  margin: 0 0 17px !important;
  padding: 0 3px !important;
  background: transparent !important;
}

/* Player compact, clair et indépendant du contenu. */
.player-v47 {
  left: 10px !important;
  right: 10px !important;
  bottom: calc(68px + env(safe-area-inset-bottom, 0px)) !important;
  width: auto !important;
  max-width: 720px !important;
  margin: 0 auto !important;
  padding: 8px 14px 12px !important;
  background: rgba(255,255,255,.985) !important;
  border: 1px solid rgba(0,109,128,.16) !important;
  border-radius: 20px !important;
  box-shadow: 0 10px 30px rgba(7,54,66,.16) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}

.player-grip {
  width: 34px !important;
  height: 3px !important;
  margin: 0 auto 8px !important;
  border-radius: 999px !important;
  background: #cfe2e5 !important;
}

.player-progress-v47 {
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) 42px !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 0 7px !important;
  color: #708189 !important;
  font-size: .70rem !important;
  font-variant-numeric: tabular-nums !important;
}

.player-progress-v47 #currentTime {
  text-align: left !important;
}

.player-progress-v47 #duration {
  text-align: right !important;
}

.player-v47 #progress {
  --progress-value: 0%;
  width: 100% !important;
  height: 18px !important;
  margin: 0 !important;
  padding: 0 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  background: transparent !important;
  cursor: pointer !important;
}

.player-v47 #progress::-webkit-slider-runnable-track {
  height: 4px !important;
  border: none !important;
  border-radius: 999px !important;
  background: linear-gradient(to right,
    #006D80 0%,
    #006D80 var(--progress-value),
    #d8e9ec var(--progress-value),
    #d8e9ec 100%) !important;
}

.player-v47 #progress::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 14px !important;
  height: 14px !important;
  margin-top: -5px !important;
  border: 2px solid #fff !important;
  border-radius: 50% !important;
  background: #006D80 !important;
  box-shadow: 0 1px 5px rgba(0,109,128,.28) !important;
}

.player-v47 #progress::-moz-range-track {
  height: 4px !important;
  border-radius: 999px !important;
  background: #d8e9ec !important;
}

.player-v47 #progress::-moz-range-progress {
  height: 4px !important;
  border-radius: 999px !important;
  background: #006D80 !important;
}

.player-v47 #progress::-moz-range-thumb {
  width: 14px !important;
  height: 14px !important;
  border: 2px solid #fff !important;
  border-radius: 50% !important;
  background: #006D80 !important;
  box-shadow: 0 1px 5px rgba(0,109,128,.28) !important;
}

.player-controls-v47 {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 46px 60px 46px !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 17px !important;
  min-height: 60px !important;
}

.player-v47 .small-control {
  position: relative !important;
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: none !important;
  border-radius: 50% !important;
  background: #edf6f7 !important;
  color: #075f70 !important;
  box-shadow: none !important;
  font-size: 1.05rem !important;
}

.player-v47 .seek-number {
  position: absolute !important;
  display: block !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -46%) !important;
  margin: 0 !important;
  color: #075f70 !important;
  font-size: .55rem !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  pointer-events: none !important;
}

.player-v47 .seek-control i {
  font-size: 1.28rem !important;
  opacity: .78 !important;
}

.player-v47 .play-main {
  width: 60px !important;
  height: 60px !important;
  min-width: 60px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: none !important;
  border-radius: 50% !important;
  background: #006D80 !important;
  color: #fff !important;
  box-shadow: 0 8px 20px rgba(0,109,128,.24) !important;
  font-size: 1.28rem !important;
}

.player-v47 .play-main.is-playing {
  box-shadow: 0 8px 22px rgba(0,109,128,.32) !important;
}

.player-v47 button:active {
  transform: scale(.94) !important;
}

.player-v47 .speed-control {
  position: absolute !important;
  right: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  min-width: 44px !important;
  height: 32px !important;
  padding: 0 8px !important;
  border: 1px solid #d2e5e8 !important;
  border-radius: 10px !important;
  background: #f7fbfb !important;
  color: #006D80 !important;
  font-size: .72rem !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

.player-v47 .speed-control:active {
  transform: translateY(-50%) scale(.94) !important;
}

/* Navigation : garde la place réservée au safe-area sur iPhone. */
body:has(.chant-page-v47) .bottom-nav {
  height: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
  padding-bottom: env(safe-area-inset-bottom, 0px) !important;
}

@media (max-width: 380px) {
  .chant-page-v47 {
    padding-left: 10px !important;
    padding-right: 10px !important;
    padding-bottom: 232px !important;
  }

  .chant-header-v47 {
    grid-template-columns: 40px minmax(0, 1fr) 82px !important;
  }

  .chant-header-v47 .chant-actions {
    width: 82px !important;
    gap: 4px !important;
  }

  .chant-header-v47 .back-btn,
  .chant-header-v47 .fav-btn {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
  }

  .chant-header-v47 #chantTitle {
    font-size: .93rem !important;
  }

  .player-v47 {
    left: 7px !important;
    right: 7px !important;
    padding-left: 11px !important;
    padding-right: 11px !important;
    border-radius: 18px !important;
  }

  .player-controls-v47 {
    grid-template-columns: 42px 56px 42px !important;
    gap: 13px !important;
  }

  .player-v47 .small-control {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
  }

  .player-v47 .play-main {
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
  }

  .player-v47 .speed-control {
    min-width: 40px !important;
    padding: 0 6px !important;
  }
}

/* Mode sombre : le player reste très lisible. */
html[data-theme="dark"] .chant-header-v47 {
  background: rgba(7,54,66,.96) !important;
  border-bottom-color: rgba(255,255,255,.12) !important;
}

html[data-theme="dark"] .chant-header-v47 #chantTitle {
  color: #f7fbfc !important;
}

html[data-theme="dark"] .chant-header-v47 .back-btn,
html[data-theme="dark"] .chant-header-v47 .fav-btn {
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.15) !important;
  color: #d8f0f3 !important;
}

html[data-theme="dark"] .player-v47 {
  background: rgba(10,57,67,.985) !important;
  border-color: rgba(255,255,255,.14) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.28) !important;
}

html[data-theme="dark"] .player-progress-v47 {
  color: #c5dce0 !important;
}

html[data-theme="dark"] .player-v47 .small-control,
html[data-theme="dark"] .player-v47 .speed-control {
  background: rgba(255,255,255,.09) !important;
  border-color: rgba(255,255,255,.12) !important;
  color: #d7f0f3 !important;
}

html[data-theme="dark"] .player-v47 .seek-number {
  color: #d7f0f3 !important;
}

/* ===== V50 vitesse audio haute qualité : état de préparation ===== */
.speed-control.is-processing {
  opacity: .72;
  cursor: wait;
  pointer-events: none;
}
.speed-control.is-processing::after {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-left: 5px;
  border: 1.5px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  vertical-align: 1px;
  animation: fihirana-speed-spin .65s linear infinite;
}
@keyframes fihirana-speed-spin {
  to { transform: rotate(360deg); }
}


/* =========================================================
   V51 — PAGE CHANT + PLAYER ÉPURÉ
   ========================================================= */
body:has(.chant-page-v51) {
  background: #ffffff !important;
}

.chant-page-v51 {
  max-width: 760px !important;
  padding-top: 10px !important;
  padding-bottom: 225px !important;
}

.chant-header-v51 {
  position: sticky !important;
  top: 0 !important;
  z-index: 80 !important;
  display: grid !important;
  grid-template-columns: 42px minmax(0,1fr) 88px !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 -6px 18px !important;
  padding: 8px 6px 11px !important;
  background: rgba(255,255,255,.96) !important;
  border-bottom: 1px solid #edf1f2 !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

.chant-header-v51 .chant-heading { min-width: 0 !important; text-align: center !important; }
.chant-header-v51 .chant-recueil-label {
  display: inline-block !important;
  margin-bottom: 4px !important;
  color: #006D80 !important;
  font-size: .64rem !important;
  font-weight: 950 !important;
  letter-spacing: .14em !important;
}
.chant-header-v51 #chantTitle {
  margin: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: #172a30 !important;
  font-size: 1rem !important;
  font-weight: 900 !important;
  line-height: 1.25 !important;
}
.chant-header-v51 .back-btn,
.chant-header-v51 .fav-btn {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid #dce8ea !important;
  border-radius: 12px !important;
  background: #f8fbfc !important;
  color: #006D80 !important;
  box-shadow: none !important;
}
.chant-header-v51 .chant-actions {
  width: 88px !important;
  display: flex !important;
  justify-content: flex-end !important;
  gap: 6px !important;
}
.chant-header-v51 .fav-btn.is-active {
  color: #d64067 !important;
  background: #fff4f7 !important;
  border-color: #f4cbd6 !important;
}
.chant-header-v51 .fav-btn.is-downloaded {
  color: #167455 !important;
  background: #eefaf5 !important;
  border-color: #c8eadc !important;
}

.chant-page-v51 .lyrics {
  max-width: 680px !important;
  margin: 0 auto !important;
  padding: 4px 8px 0 !important;
  color: #16272d !important;
  text-align: center !important;
  font-size: 1.16rem !important;
  line-height: 1.78 !important;
  letter-spacing: .005em !important;
}
.chant-page-v51 .verse {
  margin: 0 0 18px !important;
  padding: 0 !important;
  background: transparent !important;
}

.player-v51 {
  position: fixed !important;
  left: 12px !important;
  right: 12px !important;
  bottom: calc(68px + env(safe-area-inset-bottom,0px)) !important;
  z-index: 1200 !important;
  width: auto !important;
  max-width: 700px !important;
  margin: 0 auto !important;
  padding: 10px 16px 13px !important;
  background: rgba(255,255,255,.985) !important;
  border: 1px solid rgba(0,109,128,.14) !important;
  border-radius: 22px !important;
  box-shadow: 0 12px 30px rgba(7,54,66,.15) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}
.player-v51 .player-grip {
  width: 30px !important;
  height: 3px !important;
  margin: 0 auto 9px !important;
  border-radius: 999px !important;
  background: #d4e6e9 !important;
}

.player-progress-v51 {
  display: grid !important;
  grid-template-columns: 40px minmax(0,1fr) 40px !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 0 9px !important;
  color: #75888e !important;
  font-size: .69rem !important;
  font-variant-numeric: tabular-nums !important;
}
.player-progress-v51 #currentTime { text-align: left !important; }
.player-progress-v51 #duration { text-align: right !important; }
.player-v51 #progress {
  --progress-value: 0%;
  width: 100% !important;
  height: 20px !important;
  margin: 0 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  background: transparent !important;
}
.player-v51 #progress::-webkit-slider-runnable-track {
  height: 4px !important;
  border-radius: 999px !important;
  background: linear-gradient(to right,#006D80 0%,#006D80 var(--progress-value),#dbeaec var(--progress-value),#dbeaec 100%) !important;
}
.player-v51 #progress::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 15px !important;
  height: 15px !important;
  margin-top: -5.5px !important;
  border: 3px solid #fff !important;
  border-radius: 50% !important;
  background: #006D80 !important;
  box-shadow: 0 1px 6px rgba(0,109,128,.32) !important;
}
.player-v51 #progress::-moz-range-track { height:4px!important; border-radius:999px!important; background:#dbeaec!important; }
.player-v51 #progress::-moz-range-progress { height:4px!important; border-radius:999px!important; background:#006D80!important; }
.player-v51 #progress::-moz-range-thumb { width:15px!important; height:15px!important; border:3px solid #fff!important; border-radius:50%!important; background:#006D80!important; }

.player-controls-v51 {
  display: grid !important;
  grid-template-columns: 48px 64px 48px !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 22px !important;
  min-height: 64px !important;
}
.player-v51 .small-control {
  position: relative !important;
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid #d9e8ea !important;
  border-radius: 50% !important;
  background: #f1f8f9 !important;
  color: #006D80 !important;
  box-shadow: none !important;
}
.player-v51 .seek-control i { font-size: 1.25rem !important; opacity: .86 !important; }
.player-v51 .seek-number {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%,-45%) !important;
  color: #006D80 !important;
  font-size: .54rem !important;
  font-weight: 950 !important;
  line-height: 1 !important;
}
.player-v51 .play-main {
  width: 64px !important;
  height: 64px !important;
  min-width: 64px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: none !important;
  border-radius: 50% !important;
  background: linear-gradient(145deg,#00798d,#005d6d) !important;
  color: #fff !important;
  box-shadow: 0 9px 22px rgba(0,109,128,.28) !important;
  font-size: 1.34rem !important;
}
.player-v51 .play-main i.fa-play { margin-left: 3px !important; }
.player-v51 button { transition: transform .08s ease, background .15s ease, box-shadow .15s ease !important; }
.player-v51 button:active { transform: scale(.93) !important; }

body:has(.chant-page-v51) .bottom-nav {
  height: calc(64px + env(safe-area-inset-bottom,0px)) !important;
  padding-bottom: env(safe-area-inset-bottom,0px) !important;
}

@media (max-width:380px) {
  .chant-page-v51 { padding-left:10px!important; padding-right:10px!important; padding-bottom:216px!important; }
  .chant-header-v51 { grid-template-columns:38px minmax(0,1fr) 80px!important; }
  .chant-header-v51 .chant-actions { width:80px!important; gap:4px!important; }
  .chant-header-v51 .back-btn,.chant-header-v51 .fav-btn { width:37px!important; height:37px!important; min-width:37px!important; }
  .chant-header-v51 #chantTitle { font-size:.92rem!important; }
  .chant-page-v51 .lyrics { font-size:1.10rem!important; line-height:1.74!important; }
  .player-v51 { left:7px!important; right:7px!important; padding:9px 12px 12px!important; border-radius:19px!important; }
  .player-controls-v51 { grid-template-columns:44px 60px 44px!important; gap:18px!important; }
  .player-v51 .small-control { width:44px!important; height:44px!important; min-width:44px!important; }
  .player-v51 .play-main { width:60px!important; height:60px!important; min-width:60px!important; }
}

html[data-theme="dark"] .chant-header-v51 {
  background: rgba(7,54,66,.96) !important;
  border-bottom-color: rgba(255,255,255,.12) !important;
}
html[data-theme="dark"] .chant-header-v51 #chantTitle { color:#f7fbfc!important; }
html[data-theme="dark"] .chant-header-v51 .back-btn,
html[data-theme="dark"] .chant-header-v51 .fav-btn {
  background:rgba(255,255,255,.08)!important;
  border-color:rgba(255,255,255,.14)!important;
  color:#d8f0f3!important;
}
html[data-theme="dark"] .player-v51 {
  background:rgba(10,57,67,.985)!important;
  border-color:rgba(255,255,255,.13)!important;
  box-shadow:0 12px 30px rgba(0,0,0,.30)!important;
}
html[data-theme="dark"] .player-progress-v51 { color:#c7dce0!important; }
html[data-theme="dark"] .player-v51 .small-control {
  background:rgba(255,255,255,.09)!important;
  border-color:rgba(255,255,255,.12)!important;
  color:#d8f0f3!important;
}
html[data-theme="dark"] .player-v51 .seek-number { color:#d8f0f3!important; }


/* =========================================================
   V52 — TITRE SANS RECUEIL + PLAYER PLUS COMPACT
   ========================================================= */
body:has(.chant-page-v52) {
  background: #ffffff !important;
}

.chant-page-v52 {
  max-width: 760px !important;
  padding-top: 8px !important;
  padding-bottom: 184px !important;
}

.chant-header-v52 {
  position: sticky !important;
  top: 0 !important;
  z-index: 80 !important;
  display: grid !important;
  grid-template-columns: 42px minmax(0,1fr) 88px !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 -6px 14px !important;
  padding: 7px 6px 9px !important;
  background: rgba(255,255,255,.97) !important;
  border-bottom: 1px solid #edf1f2 !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

.chant-header-v52 .chant-heading {
  min-width: 0 !important;
  text-align: center !important;
}

.chant-header-v52 #chantTitle {
  margin: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: #172a30 !important;
  font-size: 1.02rem !important;
  font-weight: 900 !important;
  line-height: 1.25 !important;
}

.chant-header-v52 .back-btn,
.chant-header-v52 .fav-btn {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid #dce8ea !important;
  border-radius: 11px !important;
  background: #f8fbfc !important;
  color: #006D80 !important;
  box-shadow: none !important;
}

.chant-header-v52 .chant-actions {
  width: 88px !important;
  display: flex !important;
  justify-content: flex-end !important;
  gap: 6px !important;
}

.chant-header-v52 .fav-btn.is-active {
  color: #d64067 !important;
  background: #fff4f7 !important;
  border-color: #f4cbd6 !important;
}

.chant-header-v52 .fav-btn.is-downloaded {
  color: #167455 !important;
  background: #eefaf5 !important;
  border-color: #c8eadc !important;
}

.chant-page-v52 .lyrics {
  max-width: 680px !important;
  margin: 0 auto !important;
  padding: 2px 8px 0 !important;
  color: #16272d !important;
  text-align: center !important;
  font-size: 1.16rem !important;
  line-height: 1.78 !important;
  letter-spacing: .005em !important;
}

.chant-page-v52 .verse {
  margin: 0 0 18px !important;
  padding: 0 !important;
  background: transparent !important;
}

.player-v52 {
  position: fixed !important;
  left: 12px !important;
  right: 12px !important;
  bottom: calc(68px + env(safe-area-inset-bottom,0px)) !important;
  z-index: 1200 !important;
  width: auto !important;
  max-width: 700px !important;
  margin: 0 auto !important;
  padding: 7px 14px 9px !important;
  background: rgba(248,251,252,.985) !important;
  border: 1px solid rgba(0,109,128,.13) !important;
  border-radius: 18px !important;
  box-shadow: 0 9px 24px rgba(7,54,66,.13) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}

.player-v52 .player-grip {
  width: 27px !important;
  height: 3px !important;
  margin: 0 auto 5px !important;
  border-radius: 999px !important;
  background: #d4e6e9 !important;
}

.player-progress-v52 {
  display: grid !important;
  grid-template-columns: 37px minmax(0,1fr) 37px !important;
  align-items: center !important;
  gap: 7px !important;
  margin: 0 0 3px !important;
  color: #75888e !important;
  font-size: .66rem !important;
  font-variant-numeric: tabular-nums !important;
}

.player-progress-v52 #currentTime { text-align: left !important; }
.player-progress-v52 #duration { text-align: right !important; }

.player-v52 #progress {
  --progress-value: 0%;
  width: 100% !important;
  height: 16px !important;
  margin: 0 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  background: transparent !important;
}

.player-v52 #progress::-webkit-slider-runnable-track {
  height: 3px !important;
  border-radius: 999px !important;
  background: linear-gradient(to right,#006D80 0%,#006D80 var(--progress-value),#dbeaec var(--progress-value),#dbeaec 100%) !important;
}

.player-v52 #progress::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 13px !important;
  height: 13px !important;
  margin-top: -5px !important;
  border: 3px solid #fff !important;
  border-radius: 50% !important;
  background: #006D80 !important;
  box-shadow: 0 1px 5px rgba(0,109,128,.28) !important;
}

.player-v52 #progress::-moz-range-track { height:3px!important; border-radius:999px!important; background:#dbeaec!important; }
.player-v52 #progress::-moz-range-progress { height:3px!important; border-radius:999px!important; background:#006D80!important; }
.player-v52 #progress::-moz-range-thumb { width:13px!important; height:13px!important; border:3px solid #fff!important; border-radius:50%!important; background:#006D80!important; }

.player-controls-v52 {
  display: grid !important;
  grid-template-columns: 42px 54px 42px !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 13px !important;
  min-height: 54px !important;
}

.player-v52 .small-control {
  position: relative !important;
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid #d9e8ea !important;
  border-radius: 50% !important;
  background: #f1f8f9 !important;
  color: #006D80 !important;
  box-shadow: none !important;
}

.player-v52 .seek-control i {
  font-size: 1.08rem !important;
  opacity: .88 !important;
}

.player-v52 .seek-number {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%,-44%) !important;
  color: #006D80 !important;
  font-size: .50rem !important;
  font-weight: 950 !important;
  line-height: 1 !important;
}

.player-v52 .play-main {
  width: 54px !important;
  height: 54px !important;
  min-width: 54px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: none !important;
  border-radius: 50% !important;
  background: linear-gradient(145deg,#00798d,#005d6d) !important;
  color: #fff !important;
  box-shadow: 0 7px 18px rgba(0,109,128,.25) !important;
  font-size: 1.18rem !important;
}

.player-v52 .play-main i.fa-play { margin-left: 3px !important; }
.player-v52 button { transition: transform .08s ease, background .15s ease, box-shadow .15s ease !important; }
.player-v52 button:active { transform: scale(.93) !important; }

body:has(.chant-page-v52) .bottom-nav {
  height: calc(64px + env(safe-area-inset-bottom,0px)) !important;
  padding-bottom: env(safe-area-inset-bottom,0px) !important;
}

@media (max-width:380px) {
  .chant-page-v52 { padding-left:10px!important; padding-right:10px!important; padding-bottom:176px!important; }
  .chant-header-v52 { grid-template-columns:38px minmax(0,1fr) 80px!important; margin-bottom:12px!important; }
  .chant-header-v52 .chant-actions { width:80px!important; gap:4px!important; }
  .chant-header-v52 .back-btn,.chant-header-v52 .fav-btn { width:36px!important; height:36px!important; min-width:36px!important; }
  .chant-header-v52 #chantTitle { font-size:.93rem!important; }
  .chant-page-v52 .lyrics { font-size:1.10rem!important; line-height:1.74!important; }
  .player-v52 { left:7px!important; right:7px!important; padding:6px 10px 8px!important; border-radius:17px!important; }
  .player-controls-v52 { grid-template-columns:40px 52px 40px!important; gap:11px!important; min-height:52px!important; }
  .player-v52 .small-control { width:40px!important; height:40px!important; min-width:40px!important; }
  .player-v52 .play-main { width:52px!important; height:52px!important; min-width:52px!important; }
}

html[data-theme="dark"] .chant-header-v52 {
  background: rgba(7,54,66,.96) !important;
  border-bottom-color: rgba(255,255,255,.12) !important;
}
html[data-theme="dark"] .chant-header-v52 #chantTitle { color:#f7fbfc!important; }
html[data-theme="dark"] .chant-header-v52 .back-btn,
html[data-theme="dark"] .chant-header-v52 .fav-btn {
  background:rgba(255,255,255,.08)!important;
  border-color:rgba(255,255,255,.14)!important;
  color:#d8f0f3!important;
}
html[data-theme="dark"] .player-v52 {
  background:rgba(10,57,67,.985)!important;
  border-color:rgba(255,255,255,.13)!important;
  box-shadow:0 10px 26px rgba(0,0,0,.28)!important;
}
html[data-theme="dark"] .player-progress-v52 { color:#c7dce0!important; }
html[data-theme="dark"] .player-v52 .small-control {
  background:rgba(255,255,255,.09)!important;
  border-color:rgba(255,255,255,.12)!important;
  color:#d8f0f3!important;
}
html[data-theme="dark"] .player-v52 .seek-number { color:#d8f0f3!important; }

/* ===== PWA V1 : autonome + zones sûres iPhone/Android ===== */
html { background: #f6f3ed; }
body {
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}
.bottom-nav {
  padding-bottom: env(safe-area-inset-bottom);
  height: calc(64px + env(safe-area-inset-bottom));
}
.modern-player {
  bottom: calc(76px + env(safe-area-inset-bottom));
}
.pwa-status {
  margin-top: 14px;
  padding: 11px 12px;
  border: 1px solid rgba(0,109,128,.18);
  background: #e6f4f6;
  color: #005467;
  font-weight: 800;
  text-align: center;
  border-radius: 12px;
}
.offline-pwa-page code {
  font-size: .9em;
  background: rgba(0,109,128,.08);
  padding: 2px 5px;
  border-radius: 5px;
}

/* ===== PWA V2 : footer plus lisible et icônes nettes ===== */
.bottom-nav {
  height: calc(74px + env(safe-area-inset-bottom)) !important;
  padding: 7px 6px calc(7px + env(safe-area-inset-bottom)) !important;
  background: rgba(255,255,255,.98) !important;
  border-top: 1px solid #e4e7e8 !important;
  box-shadow: 0 -5px 18px rgba(20,43,48,.055) !important;
  overflow: visible !important;
}

.bottom-nav .nav-item {
  height: 60px !important;
  min-width: 0 !important;
  padding: 4px 2px 3px !important;
  gap: 5px !important;
  color: #596165 !important;
  font-size: 13.5px !important;
  font-weight: 650 !important;
  line-height: 1.05 !important;
  letter-spacing: 0 !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

.bottom-nav .nav-item i {
  width: 29px !important;
  height: 29px !important;
  font-size: 27px !important;
  color: currentColor !important;
  opacity: 1 !important;
}

.bottom-nav .nav-item span {
  display: block !important;
  white-space: nowrap !important;
  color: currentColor !important;
}

.bottom-nav .nav-item.active {
  color: var(--brand, #006D80) !important;
  font-weight: 750 !important;
}

.bottom-nav .nav-item:active {
  transform: scale(.96);
}

/* Le contenu et le player remontent avec le footer plus haut. */
body { padding-bottom: calc(90px + env(safe-area-inset-bottom)) !important; }
.modern-player { bottom: calc(84px + env(safe-area-inset-bottom)) !important; }

@media (max-width: 370px) {
  .bottom-nav .nav-item { font-size: 12.5px !important; }
  .bottom-nav .nav-item i { width: 27px !important; height: 27px !important; font-size: 25px !important; }
}

html[data-theme="dark"] .bottom-nav,
html[data-theme="dark"] body:has(.home-page) .bottom-nav,
html[data-theme="dark"] body:not(:has(.home-page)) .bottom-nav {
  background: #073642 !important;
  border-top-color: rgba(255,255,255,.13) !important;
  box-shadow: 0 -6px 20px rgba(0,0,0,.18) !important;
}
html[data-theme="dark"] .bottom-nav .nav-item,
html[data-theme="dark"] body:has(.home-page) .bottom-nav .nav-item,
html[data-theme="dark"] body:not(:has(.home-page)) .bottom-nav .nav-item {
  color: #c5d4d7 !important;
}
html[data-theme="dark"] .bottom-nav .nav-item.active,
html[data-theme="dark"] body:has(.home-page) .bottom-nav .nav-item.active,
html[data-theme="dark"] body:not(:has(.home-page)) .bottom-nav .nav-item.active {
  color: #F2A900 !important;
}

/* =========================================================
   PWA V3 — identité Fihirana : barre chant fixe + footer couleur
   ========================================================= */
:root {
  --fihirana-brand: #007f88;
  --fihirana-brand-dark: #006d76;
  --fihirana-brand-soft: #e9f6f7;
}

/* Page chant : réserver la place de la barre fixe. */
body:has(.chant-page-v52) {
  background: #fff !important;
}

.chant-page-v52 {
  padding-top: calc(74px + env(safe-area-inset-top, 0px)) !important;
  padding-bottom: 190px !important;
}

/* Barre supérieure fixe, dans la même identité que le clavier d'accueil. */
.chant-header-v52 {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 1500 !important;
  width: 100% !important;
  height: calc(66px + env(safe-area-inset-top, 0px)) !important;
  margin: 0 !important;
  padding: calc(8px + env(safe-area-inset-top, 0px)) 16px 8px !important;
  grid-template-columns: 44px minmax(0,1fr) 96px !important;
  gap: 10px !important;
  background: linear-gradient(180deg, var(--fihirana-brand) 0%, var(--fihirana-brand-dark) 100%) !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(0,0,0,.08) !important;
  box-shadow: 0 3px 14px rgba(0,73,80,.16) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.chant-header-v52 .chant-heading {
  min-width: 0 !important;
  text-align: center !important;
}

.chant-header-v52 #chantTitle {
  color: #fff !important;
  font-size: 1.04rem !important;
  font-weight: 850 !important;
  line-height: 1.2 !important;
  text-shadow: 0 1px 1px rgba(0,0,0,.08) !important;
}

.chant-header-v52 .back-btn,
.chant-header-v52 .fav-btn,
.chant-header-v52 .fav-btn.is-active,
.chant-header-v52 .fav-btn.is-downloaded {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  border: 1px solid rgba(255,255,255,.28) !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,.10) !important;
  color: #fff !important;
  box-shadow: none !important;
}

.chant-header-v52 .back-btn i,
.chant-header-v52 .fav-btn i {
  font-size: 1.25rem !important;
  color: #fff !important;
}

.chant-header-v52 .chant-actions {
  width: 96px !important;
  gap: 7px !important;
}

.chant-header-v52 .fav-btn:active,
.chant-header-v52 .back-btn:active {
  background: rgba(255,255,255,.20) !important;
  transform: scale(.95) !important;
}

/* Footer coloré : plus contrasté, icônes grandes et nettes. */
.bottom-nav,
body:has(.home-page) .bottom-nav,
body:not(:has(.home-page)) .bottom-nav,
html[data-theme="dark"] .bottom-nav,
html[data-theme="dark"] body:has(.home-page) .bottom-nav,
html[data-theme="dark"] body:not(:has(.home-page)) .bottom-nav {
  height: calc(82px + env(safe-area-inset-bottom, 0px)) !important;
  padding: 7px 7px calc(7px + env(safe-area-inset-bottom, 0px)) !important;
  background: linear-gradient(180deg, var(--fihirana-brand) 0%, var(--fihirana-brand-dark) 100%) !important;
  border-top: 0 !important;
  box-shadow: 0 -4px 16px rgba(0,73,80,.16) !important;
}

.bottom-nav .nav-item,
html[data-theme="dark"] .bottom-nav .nav-item,
html[data-theme="dark"] body:has(.home-page) .bottom-nav .nav-item,
html[data-theme="dark"] body:not(:has(.home-page)) .bottom-nav .nav-item {
  height: 66px !important;
  padding: 5px 2px 4px !important;
  gap: 5px !important;
  border-radius: 14px !important;
  color: rgba(255,255,255,.86) !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  opacity: 1 !important;
  transition: background .15s ease, color .15s ease, transform .08s ease !important;
}

.bottom-nav .nav-item i,
html[data-theme="dark"] .bottom-nav .nav-item i {
  width: 31px !important;
  height: 31px !important;
  font-size: 29px !important;
  color: currentColor !important;
  opacity: 1 !important;
}

.bottom-nav .nav-item span {
  color: currentColor !important;
  font-weight: inherit !important;
  text-shadow: 0 1px 1px rgba(0,0,0,.06) !important;
}

.bottom-nav .nav-item.active,
html[data-theme="dark"] .bottom-nav .nav-item.active,
html[data-theme="dark"] body:has(.home-page) .bottom-nav .nav-item.active,
html[data-theme="dark"] body:not(:has(.home-page)) .bottom-nav .nav-item.active {
  color: #fff !important;
  background: rgba(255,255,255,.17) !important;
  font-weight: 850 !important;
}

.bottom-nav .nav-item:active {
  transform: scale(.95) !important;
  background: rgba(255,255,255,.22) !important;
}

/* Le player reste clair et flotte juste au-dessus du nouveau footer. */
.modern-player,
.player-v52 {
  bottom: calc(92px + env(safe-area-inset-bottom, 0px)) !important;
}

body {
  padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px)) !important;
}

@media (max-width: 380px) {
  .chant-page-v52 {
    padding-top: calc(72px + env(safe-area-inset-top, 0px)) !important;
  }
  .chant-header-v52 {
    height: calc(64px + env(safe-area-inset-top, 0px)) !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    grid-template-columns: 40px minmax(0,1fr) 88px !important;
  }
  .chant-header-v52 #chantTitle { font-size: .96rem !important; }
  .chant-header-v52 .back-btn,
  .chant-header-v52 .fav-btn { width: 39px !important; height: 39px !important; min-width: 39px !important; }
  .chant-header-v52 .chant-actions { width: 88px !important; gap: 5px !important; }
  .bottom-nav .nav-item { font-size: 12.5px !important; }
  .bottom-nav .nav-item i { width: 29px !important; height: 29px !important; font-size: 27px !important; }
}


/* =========================================================
   PWA V4 — titre défilant + commandes sans cadres + player épuré
   Le footer V3 est volontairement inchangé.
   ========================================================= */

/* Le titre reste centré lorsqu'il tient, et défile seulement s'il déborde. */
.chant-header-v52 .chant-heading {
  position: relative !important;
  overflow: hidden !important;
  min-width: 0 !important;
  height: 42px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 10px, #000 calc(100% - 10px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 10px, #000 calc(100% - 10px), transparent 100%);
}

.chant-header-v52 #chantTitle {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 4px !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
  text-align: center !important;
  transform: translateX(0);
  will-change: transform;
}

.chant-header-v52 #chantTitle.title-marquee {
  width: max-content !important;
  max-width: none !important;
  min-width: max-content !important;
  text-align: left !important;
  animation: fihirana-title-marquee var(--marquee-duration, 10s) ease-in-out infinite;
}

@keyframes fihirana-title-marquee {
  0%, 14% { transform: translateX(0); }
  78%, 92% { transform: translateX(var(--marquee-distance, 0px)); }
  100% { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .chant-header-v52 #chantTitle.title-marquee {
    animation: none !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-align: center !important;
  }
}

/* Flèche, favori et téléchargement : plus aucun carré autour. */
.chant-header-v52 .back-btn,
.chant-header-v52 .fav-btn,
.chant-header-v52 .fav-btn.is-active,
.chant-header-v52 .fav-btn.is-downloaded {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #fff !important;
  box-shadow: none !important;
  outline: none !important;
}

.chant-header-v52 .back-btn i,
.chant-header-v52 .fav-btn i {
  font-size: 1.45rem !important;
  color: #fff !important;
  filter: none !important;
}

.chant-header-v52 .fav-btn:active,
.chant-header-v52 .back-btn:active {
  background: transparent !important;
  transform: scale(.88) !important;
  opacity: .72 !important;
}

.chant-header-v52 .fav-btn.is-active i,
.chant-header-v52 .fav-btn.is-downloaded i {
  color: #fff !important;
}

/* Player : supprimer le grand cadre arrondi, conserver uniquement les commandes. */
.modern-player.player-v52,
.modern-player,
.player-v52 {
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 10px 18px 12px !important;
  background: rgba(255,255,255,.985) !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.player-v52 .player-grip,
.modern-player .player-grip {
  display: none !important;
}

.player-v52 .player-progress-v52,
.modern-player .player-progress-v52 {
  margin-top: 0 !important;
}

/* Les trois boutons du player restent distincts sans ajouter un nouveau cadre global. */
.player-v52 .small-control,
.modern-player .small-control {
  box-shadow: none !important;
}

/* Mode sombre : le player reste intégré au fond, sans contour. */
html[data-theme="dark"] .modern-player,
html[data-theme="dark"] .player-v52 {
  background: #0b3f49 !important;
  border: 0 !important;
  box-shadow: none !important;
}


/* =========================================================
   PWA V5 — correctif cache + retouches chant garanties
   ========================================================= */
body .chant-header-v52 .back-btn,
body .chant-header-v52 .fav-btn,
body .chant-header-v52 .fav-btn.is-active,
body .chant-header-v52 .fav-btn.is-downloaded {
  border: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
}
body .chant-header-v52 .chant-heading {
  overflow: hidden !important;
  min-width: 0 !important;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8px, #000 calc(100% - 8px), transparent 100%) !important;
  mask-image: linear-gradient(90deg, transparent 0, #000 8px, #000 calc(100% - 8px), transparent 100%) !important;
}
body .chant-header-v52 #chantTitle {
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
}
body .chant-header-v52 #chantTitle.title-marquee {
  width: max-content !important;
  max-width: none !important;
  animation: fihirana-title-marquee-v5 var(--marquee-duration, 11s) ease-in-out infinite !important;
}
@keyframes fihirana-title-marquee-v5 {
  0%, 15% { transform: translate3d(0,0,0); }
  72%, 88% { transform: translate3d(var(--marquee-distance, 0px),0,0); }
  100% { transform: translate3d(0,0,0); }
}
body .modern-player.player-v52,
body .modern-player,
body .player-v52 {
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: #ffffff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
body .player-v52 .player-grip,
body .modern-player .player-grip { display: none !important; }
/* Footer V3 volontairement inchangé. */

/* ===== PWA V6 — titre défilant : début toujours visible ===== */
body .chant-header-v52 .chant-heading {
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 calc(100% - 10px), transparent 100%) !important;
  mask-image: linear-gradient(90deg, #000 0%, #000 calc(100% - 10px), transparent 100%) !important;
}
body .chant-header-v52 .chant-heading.has-marquee {
  text-align: left !important;
}
body .chant-header-v52 #chantTitle.title-marquee {
  display: inline-block !important;
  width: max-content !important;
  max-width: none !important;
  margin: 0 !important;
  transform: translate3d(0,0,0);
  will-change: transform;
  animation: fihirana-title-marquee-v6 var(--marquee-duration, 12s) ease-in-out infinite !important;
}
@keyframes fihirana-title-marquee-v6 {
  0%, 20% { transform: translate3d(0,0,0); }
  68%, 86% { transform: translate3d(var(--marquee-distance, 0px),0,0); }
  100% { transform: translate3d(0,0,0); }
}
@media (prefers-reduced-motion: reduce) {
  body .chant-header-v52 #chantTitle.title-marquee {
    animation: none !important;
    transform: translate3d(0,0,0) !important;
  }
}

/* ===== PWA V7 — correction réelle du départ du titre défilant ===== */
body .chant-header-v52 .chant-heading.has-marquee {
  justify-content: flex-start !important;
  text-align: left !important;
}
body .chant-header-v52 .chant-heading.has-marquee #chantTitle {
  flex: 0 0 auto !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
  transform-origin: left center !important;
}


/* ===== PWA V8 — commandes Début / Fin plus visibles ===== */
body .player-v52 .edge-control,
body .modern-player .edge-control {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: #e8f5f6 !important;
  color: #006D80 !important;
  box-shadow: none !important;
}
body .player-v52 .edge-control .edge-icon,
body .modern-player .edge-control .edge-icon {
  width: 29px !important;
  height: 29px !important;
  display: block !important;
  overflow: visible !important;
  fill: #006D80 !important;
  stroke: #006D80 !important;
  stroke-width: 2.3 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}
body .player-v52 .edge-control:active,
body .modern-player .edge-control:active {
  transform: scale(.93) !important;
  background: #d9eef1 !important;
}
body .player-controls-v52 {
  grid-template-columns: 48px 56px 48px !important;
  gap: 18px !important;
}
@media (max-width: 380px) {
  body .player-v52 .edge-control,
  body .modern-player .edge-control {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
  }
  body .player-v52 .edge-control .edge-icon,
  body .modern-player .edge-control .edge-icon {
    width: 27px !important;
    height: 27px !important;
  }
  body .player-controls-v52 {
    grid-template-columns: 44px 52px 44px !important;
    gap: 16px !important;
  }
}

/* ===== V9 FOOTER — onglet actif sans cadre ===== */
.bottom-nav .nav-item.active,
html[data-theme="dark"] .bottom-nav .nav-item.active,
html[data-theme="dark"] body:has(.home-page) .bottom-nav .nav-item.active,
html[data-theme="dark"] body:not(:has(.home-page)) .bottom-nav .nav-item.active {
  background: transparent !important;
  border-radius: 0 !important;
  color: #F2A900 !important;
  font-weight: 850 !important;
  box-shadow: none !important;
}

.bottom-nav .nav-item.active i,
.bottom-nav .nav-item.active span,
html[data-theme="dark"] .bottom-nav .nav-item.active i,
html[data-theme="dark"] .bottom-nav .nav-item.active span {
  color: #F2A900 !important;
}

/* Pas de fond permanent sur l'onglet actif ; petit feedback uniquement au toucher. */
.bottom-nav .nav-item:active {
  transform: scale(.95) !important;
  background: rgba(255,255,255,.10) !important;
}


/* ===== V35 ACCUEIL — cartes légèrement réduites et descendues ===== */

/* Laisse davantage d'air en haut sur l'accueil */
body .home-page {
  padding-top: 40px !important;
}

/* Réduit légèrement la largeur globale des 3 recueils */
body .home-page .recueil-tabs {
  max-width: 350px !important;
  margin-top: 12px !important;
  margin-bottom: 26px !important;
  gap: 10px !important;
}

/* Réduit légèrement la hauteur des cartes */
body .home-page .recueil-btn {
  min-height: 94px !important;
  padding: 14px 6px 12px !important;
}

/* Petits écrans / iPhone */
@media (max-width: 380px) {
  body .home-page .recueil-tabs {
    max-width: 338px !important;
    gap: 8px !important;
  }

  body .home-page .recueil-btn {
    min-height: 84px !important;
    padding: 11px 5px 10px !important;
    font-size: .80rem !important;
  }
}

/* Écrans plus bas : on garde malgré tout l'espace au-dessus */
@media (max-height: 700px) {
  body .home-page {
    padding-top: 24px !important;
  }

  body .home-page .recueil-tabs {
    margin-top: 8px !important;
  }
}

@media (max-height: 620px) {
  body .home-page {
    padding-top: 20px !important;
  }

  body .home-page .recueil-tabs {
    margin-top: 6px !important;
  }
}

/* ===== CORRECTION FINALE — cohérence mode sombre : player + footer ===== */
/* En mode sombre, le player et le footer reprennent la teinte du header. */
html[data-theme="dark"] .modern-player,
html[data-theme="dark"] .modern-player.player-v52,
html[data-theme="dark"] .player-v52 {
  background: rgba(7,54,66,.98) !important;
  border-color: rgba(255,255,255,.12) !important;
  color: #f7fbfc !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .modern-player .progress-wrap,
html[data-theme="dark"] .player-v52 .player-progress-v52,
html[data-theme="dark"] .player-v52 .progress-wrap {
  color: #c7dce0 !important;
}

html[data-theme="dark"] .modern-player .small-control,
html[data-theme="dark"] .player-v52 .small-control {
  color: #d8f0f3 !important;
  background: transparent !important;
  border-color: transparent !important;
}

html[data-theme="dark"] .modern-player .play-main,
html[data-theme="dark"] .player-v52 .play-main {
  background: #4b5563 !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

html[data-theme="dark"] #progress {
  accent-color: #d8f0f3 !important;
}

html[data-theme="dark"] #progress::-webkit-slider-runnable-track {
  background: rgba(216,240,243,.35) !important;
}

html[data-theme="dark"] #progress::-webkit-slider-thumb {
  background: #f7fbfc !important;
  border-color: #073642 !important;
}

html[data-theme="dark"] #progress::-moz-range-track {
  background: rgba(216,240,243,.35) !important;
}

html[data-theme="dark"] #progress::-moz-range-progress,
html[data-theme="dark"] #progress::-moz-range-thumb {
  background: #f7fbfc !important;
}

html[data-theme="dark"] .bottom-nav,
html[data-theme="dark"] body:has(.home-page) .bottom-nav,
html[data-theme="dark"] body:not(:has(.home-page)) .bottom-nav {
  background: rgba(7,54,66,.98) !important;
  border-top: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .bottom-nav .nav-item,
html[data-theme="dark"] body:has(.home-page) .bottom-nav .nav-item,
html[data-theme="dark"] body:not(:has(.home-page)) .bottom-nav .nav-item {
  color: #d8f0f3 !important;
}

html[data-theme="dark"] .bottom-nav .nav-item.active,
html[data-theme="dark"] body:has(.home-page) .bottom-nav .nav-item.active,
html[data-theme="dark"] body:not(:has(.home-page)) .bottom-nav .nav-item.active,
html[data-theme="dark"] .bottom-nav .nav-item.active i,
html[data-theme="dark"] .bottom-nav .nav-item.active span {
  color: #ffffff !important;
  background: transparent !important;
}

/* ===== V10 MODE SOMBRE — player collé au footer ===== */
html[data-theme="dark"] .modern-player,
html[data-theme="dark"] .modern-player.player-v52,
html[data-theme="dark"] .player-v52 {
  bottom: calc(82px + env(safe-area-inset-bottom, 0px)) !important;
  margin-bottom: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,.12) !important;
}

/* =========================================================
   RECHERCHE — version épurée + titre fixe comme page chant
   ========================================================= */

/* La page réserve la place de l'en-tête fixe. */
.search-page {
  padding-top: calc(92px + env(safe-area-inset-top, 0px)) !important;
  min-height: 100vh !important;
}

/* En-tête Recherche : même principe visuel que l'en-tête des chants. */
.search-hero {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 1500 !important;
  width: 100% !important;
  max-width: none !important;
  height: calc(66px + env(safe-area-inset-top, 0px)) !important;
  margin: 0 !important;
  padding: calc(8px + env(safe-area-inset-top, 0px)) 16px 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(180deg, var(--fihirana-brand) 0%, var(--fihirana-brand-dark) 100%) !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(0,0,0,.08) !important;
  box-shadow: 0 3px 14px rgba(0,73,80,.16) !important;
}

.search-hero h1 {
  margin: 0 !important;
  padding: 0 !important;
  color: #ffffff !important;
  font-size: 1.22rem !important;
  font-weight: 850 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  text-shadow: 0 1px 1px rgba(0,0,0,.08) !important;
}

/* Suppression des textes explicatifs demandée. */
.search-hero p,
.search-help,
.search-status {
  display: none !important;
}

/* On supprime le grand cadre autour du champ. */
.search-panel {
  width: 100% !important;
  max-width: 680px !important;
  margin: 0 auto 18px !important;
  padding: 0 16px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.search-input-wrap {
  width: 100% !important;
}

/* Champ plus sobre et moderne. */
.search-page #searchInput,
body:has(.search-page) #searchInput {
  width: 100% !important;
  min-height: 56px !important;
  padding: 14px 18px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(148,163,184,.34) !important;
  background: #f8fafc !important;
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
  font-size: 1rem !important;
  box-shadow: 0 6px 18px rgba(15,23,42,.12) !important;
  outline: none !important;
}

.search-page #searchInput:focus,
.search-page #searchInput:active {
  background: #ffffff !important;
  border-color: var(--fihirana-brand) !important;
  box-shadow: 0 0 0 3px rgba(0,127,136,.16) !important;
}

/* Résultats légèrement remontés puisque les commentaires ont disparu. */
.search-results {
  padding: 0 16px calc(100px + env(safe-area-inset-bottom, 0px)) !important;
  margin-top: 2px !important;
}

/* En sombre, l'en-tête garde exactement l'identité Fihirana. */
html[data-theme="dark"] .search-hero {
  background: linear-gradient(180deg, var(--fihirana-brand) 0%, var(--fihirana-brand-dark) 100%) !important;
  border-bottom-color: rgba(255,255,255,.10) !important;
}

html[data-theme="dark"] .search-hero h1 {
  color: #ffffff !important;
}

@media (max-width: 380px) {
  .search-page {
    padding-top: calc(88px + env(safe-area-inset-top, 0px)) !important;
  }

  .search-hero {
    height: calc(64px + env(safe-area-inset-top, 0px)) !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .search-hero h1 {
    font-size: 1.16rem !important;
  }

  .search-panel,
  .search-results {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}


/* =========================================================
   FAVORIS — titre fixe épuré, cohérent avec Recherche/Chants
   ========================================================= */

/* Réserver la place du bandeau fixe. */
.favorites-page {
  padding-top: calc(76px + env(safe-area-inset-top, 0px)) !important;
}

/* Le bloc d'en-tête devient le bandeau supérieur fixe. */
.favorites-head {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 1500 !important;
  width: 100% !important;
  height: calc(66px + env(safe-area-inset-top, 0px)) !important;
  margin: 0 !important;
  padding: calc(8px + env(safe-area-inset-top, 0px)) 16px 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(180deg, var(--fihirana-brand) 0%, var(--fihirana-brand-dark) 100%) !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(0,0,0,.08) !important;
  box-shadow: 0 3px 14px rgba(0,73,80,.16) !important;
}

/* Titre seul, comme sur la page des chants. */
.favorites-head h1 {
  margin: 0 !important;
  padding: 0 !important;
  color: #fff !important;
  font-size: 1.04rem !important;
  font-weight: 850 !important;
  line-height: 1.2 !important;
  text-align: center !important;
  letter-spacing: 0 !important;
  text-shadow: 0 1px 1px rgba(0,0,0,.08) !important;
}

/* Supprimer les textes explicatifs et la note "Hira noteh..." / conservation. */
.favorites-head p,
.favorites-note {
  display: none !important;
}

/* En sombre : même bleu pétrole que l'en-tête des chants. */
html[data-theme="dark"] .favorites-head {
  background: rgba(7,54,66,.96) !important;
  border-bottom-color: rgba(255,255,255,.12) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .favorites-head h1 {
  color: #f7fbfc !important;
}

/* Le contenu ne doit pas passer sous le footer. */
.favorites-list {
  padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px)) !important;
}

@media (max-width: 380px) {
  .favorites-page {
    padding-top: calc(74px + env(safe-area-inset-top, 0px)) !important;
  }
  .favorites-head {
    height: calc(64px + env(safe-area-inset-top, 0px)) !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}


/* =========================================================
   CATEGORIES — titre fixe + liste légère
   ========================================================= */

.categories-page {
  padding-top: calc(76px + env(safe-area-inset-top, 0px)) !important;
}

/* Bandeau fixe, cohérent avec Recherche / Favoris / Chants */
.categories-head {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 1500 !important;
  width: 100% !important;
  height: calc(66px + env(safe-area-inset-top, 0px)) !important;
  margin: 0 !important;
  padding: calc(8px + env(safe-area-inset-top, 0px)) 16px 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(180deg, var(--fihirana-brand) 0%, var(--fihirana-brand-dark) 100%) !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(0,0,0,.08) !important;
  box-shadow: 0 3px 14px rgba(0,73,80,.16) !important;
}

.categories-head h1 {
  margin: 0 !important;
  padding: 0 !important;
  color: #fff !important;
  font-size: 1.04rem !important;
  font-weight: 850 !important;
  line-height: 1.2 !important;
  text-align: center !important;
  letter-spacing: 0 !important;
  text-shadow: 0 1px 1px rgba(0,0,0,.08) !important;
}

.categories-head p {
  display: none !important;
}

/* La liste n'est plus une succession de grosses cartes. */
.categories-list {
  gap: 0 !important;
  padding: 0 18px calc(104px + env(safe-area-inset-bottom, 0px)) !important;
}

.category-card,
html[data-theme="dark"] .category-card {
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  opacity: 1 !important;
  overflow: visible !important;
}

/* Une ligne compacte par catégorie */
.category-toggle,
.category-card:not(.open) .category-toggle,
html[data-theme="dark"] .category-toggle {
  position: relative !important;
  min-height: 62px !important;
  padding: 13px 34px 13px 6px !important;
  justify-content: flex-start !important;
  text-align: left !important;
  background: transparent !important;
  border: 0 !important;
  border-left: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,.16) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: #f7fbfc !important;
  font-size: .98rem !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
}

/* Petit chevron discret */
.category-toggle::after {
  content: "›" !important;
  position: absolute !important;
  right: 7px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: rgba(255,255,255,.55) !important;
  font-size: 1.55rem !important;
  font-weight: 400 !important;
}

/* Catégorie ouverte : garder une indication légère, sans grosse carte */
.category-card.open,
html[data-theme="dark"] .category-card.open {
  border: 0 !important;
  box-shadow: none !important;
}

.category-card.open .category-toggle,
html[data-theme="dark"] .category-card.open .category-toggle {
  background: rgba(255,255,255,.06) !important;
  color: #fff !important;
  border-left: 0 !important;
  border-bottom-color: rgba(255,255,255,.20) !important;
}

.category-card.open .category-toggle::after {
  content: "⌄" !important;
  color: #F2A900 !important;
}

/* Sous-catégories : conserver le fonctionnement, mais alléger l'habillage */
.category-content,
html[data-theme="dark"] .category-content {
  background: transparent !important;
  padding: 4px 8px 10px !important;
}

.subcategory,
html[data-theme="dark"] .subcategory {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* En mode sombre : bandeau identique aux chants */
html[data-theme="dark"] .categories-head {
  background: rgba(7,54,66,.96) !important;
  border-bottom-color: rgba(255,255,255,.12) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .categories-head h1 {
  color: #f7fbfc !important;
}

/* Mode clair : lignes sobres sur fond clair */
html:not([data-theme="dark"]) .category-toggle {
  color: #263238 !important;
  border-bottom-color: rgba(31,41,55,.13) !important;
}

html:not([data-theme="dark"]) .category-toggle::after {
  color: rgba(31,41,55,.42) !important;
}

html:not([data-theme="dark"]) .category-card.open .category-toggle {
  background: rgba(0,127,136,.055) !important;
  color: #263238 !important;
}

html:not([data-theme="dark"]) .subcategory {
  border-bottom-color: rgba(31,41,55,.10) !important;
}

@media (max-width: 380px) {
  .categories-page {
    padding-top: calc(74px + env(safe-area-inset-top, 0px)) !important;
  }
  .categories-head {
    height: calc(64px + env(safe-area-inset-top, 0px)) !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  .categories-list {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
  .category-toggle {
    min-height: 58px !important;
    padding-top: 11px !important;
    padding-bottom: 11px !important;
  }
}


/* =========================================================
   CATEGORIES — finition affichage d'une catégorie ouverte
   ========================================================= */

/* Le titre de la catégorie ouverte doit rester parfaitement visible. */
.categories-list.focus-mode .category-card.open .category-toggle,
html[data-theme="dark"] .categories-list.focus-mode .category-card.open .category-toggle {
  min-height: 58px !important;
  margin: 0 !important;
  padding: 12px 34px 12px 6px !important;
  background: transparent !important;
  color: #ffffff !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,.22) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

.categories-list.focus-mode .category-card.open .category-toggle span,
html[data-theme="dark"] .categories-list.focus-mode .category-card.open .category-toggle span {
  color: #ffffff !important;
  opacity: 1 !important;
  font-weight: 850 !important;
}

/* Chevron ouvert discret et bien visible. */
.categories-list.focus-mode .category-card.open .category-toggle::after {
  content: "⌄" !important;
  color: #F2A900 !important;
  opacity: 1 !important;
}

/* En mode clair, conserver un titre sombre. */
html:not([data-theme="dark"]) .categories-list.focus-mode .category-card.open .category-toggle,
html:not([data-theme="dark"]) .categories-list.focus-mode .category-card.open .category-toggle span {
  color: #263238 !important;
}

html:not([data-theme="dark"]) .categories-list.focus-mode .category-card.open .category-toggle {
  border-bottom-color: rgba(31,41,55,.16) !important;
}

/* "Voir toutes les catégories" devient une commande légère,
   cohérente avec la liste, sans gros bouton arrondi. */
.show-all-categories,
html[data-theme="dark"] .show-all-categories {
  width: calc(100% - 36px) !important;
  max-width: none !important;
  margin: 18px auto calc(104px + env(safe-area-inset-bottom, 0px)) !important;
  padding: 14px 4px !important;
  background: transparent !important;
  border: 0 !important;
  border-top: 1px solid rgba(255,255,255,.18) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: #d8eef1 !important;
  font-size: .94rem !important;
  font-weight: 800 !important;
  text-align: center !important;
}

.show-all-categories::before {
  content: "‹ " !important;
  color: #F2A900 !important;
  font-size: 1.15em !important;
}

.show-all-categories:active {
  opacity: .68 !important;
  transform: none !important;
}

html:not([data-theme="dark"]) .show-all-categories {
  color: var(--fihirana-brand-dark) !important;
  border-top-color: rgba(31,41,55,.14) !important;
}

@media (max-width: 380px) {
  .show-all-categories,
  html[data-theme="dark"] .show-all-categories {
    width: calc(100% - 30px) !important;
  }
}


/* =========================================================
   CATEGORIES — correctif final catégorie ouverte
   ========================================================= */

/* Titre de la catégorie ouverte : toujours parfaitement lisible */
html[data-theme="dark"] body .categories-list.focus-mode .category-card.open .category-toggle,
html[data-theme="dark"] body .categories-list.focus-mode .category-card.open .category-toggle span {
  color: #f7fbfc !important;
  -webkit-text-fill-color: #f7fbfc !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

/* Le chevron reste doré */
html[data-theme="dark"] body .categories-list.focus-mode .category-card.open .category-toggle::after {
  color: #F2A900 !important;
  -webkit-text-fill-color: #F2A900 !important;
  opacity: 1 !important;
}

/* Le bouton de retour doit suivre immédiatement le contenu,
   et ne plus être repoussé au milieu de l'écran */
body .show-all-categories.visible,
html[data-theme="dark"] body .show-all-categories.visible {
  display: block !important;
  position: static !important;
  float: none !important;
  width: calc(100% - 36px) !important;
  max-width: none !important;
  min-height: 0 !important;
  margin: 12px auto calc(104px + env(safe-area-inset-bottom, 0px)) !important;
  padding: 13px 4px !important;
  background: transparent !important;
  border: 0 !important;
  border-top: 1px solid rgba(255,255,255,.18) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: #d8eef1 !important;
  -webkit-text-fill-color: #d8eef1 !important;
  font-size: .94rem !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  text-align: center !important;
  opacity: 1 !important;
  transform: none !important;
}

/* Flèche de retour dorée */
body .show-all-categories.visible::before,
html[data-theme="dark"] body .show-all-categories.visible::before {
  content: "‹ " !important;
  color: #F2A900 !important;
  -webkit-text-fill-color: #F2A900 !important;
  opacity: 1 !important;
}

/* Éviter qu'un ancien flex/grid distribue le contenu sur toute la hauteur */
.categories-page,
.categories-list,
.categories-list.focus-mode {
  align-content: start !important;
  justify-content: flex-start !important;
}

.categories-list.focus-mode {
  min-height: 0 !important;
}

/* Mode clair */
html:not([data-theme="dark"]) body .show-all-categories.visible {
  color: var(--fihirana-brand-dark) !important;
  -webkit-text-fill-color: var(--fihirana-brand-dark) !important;
  border-top-color: rgba(31,41,55,.14) !important;
}


/* =========================================================
   FAVORIS — correctif final moderne
   ========================================================= */

/* La liste devient sobre et légère */
body:has(.favorites-page) .favorites-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  padding: 8px 18px calc(104px + env(safe-area-inset-bottom, 0px)) !important;
}

/* Plus de cartes blanches : une ligne par favori */
body:has(.favorites-page) .favorite-card,
html[data-theme="dark"] body:has(.favorites-page) .favorite-card {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 82px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  color: #f7fbfc !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,.38) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

body:has(.favorites-page) .favorite-card:last-child {
  border-bottom: 0 !important;
}

/* Lien / titre */
body:has(.favorites-page) .favorite-main {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  padding: 13px 4px 13px 2px !important;
  color: #f7fbfc !important;
  -webkit-text-fill-color: #f7fbfc !important;
  text-decoration: none !important;
}

body:has(.favorites-page) .favorite-main strong {
  display: block !important;
  margin: 0 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: 1rem !important;
  font-weight: 760 !important;
  line-height: 1.35 !important;
}

/* Badge FFPM bien visible */
body:has(.favorites-page) .favorite-recueil,
html[data-theme="dark"] body:has(.favorites-page) .favorite-recueil {
  display: inline-block !important;
  width: fit-content !important;
  margin: 0 0 4px !important;
  padding: 2px 8px !important;
  background: rgba(255,255,255,.12) !important;
  border: 1px solid rgba(255,255,255,.38) !important;
  border-radius: 999px !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: .70rem !important;
  font-weight: 850 !important;
  line-height: 1.35 !important;
  opacity: 1 !important;
}

/* Bouton poubelle simple et explicite */
body:has(.favorites-page) .favorite-delete,
html[data-theme="dark"] body:has(.favorites-page) .favorite-delete {
  flex: 0 0 42px !important;
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  margin: 0 2px 0 0 !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 50% !important;
  box-shadow: none !important;
  color: #fca5a5 !important;
  -webkit-text-fill-color: #fca5a5 !important;
  font-size: 1rem !important;
}

body:has(.favorites-page) .favorite-delete i,
html[data-theme="dark"] body:has(.favorites-page) .favorite-delete i {
  color: #fca5a5 !important;
  -webkit-text-fill-color: #fca5a5 !important;
  font-size: 1.08rem !important;
}

body:has(.favorites-page) .favorite-delete:active {
  background: rgba(248,113,113,.13) !important;
  transform: scale(.92) !important;
}

/* Etat vide */
body:has(.favorites-page) .favorites-empty {
  margin-top: 18px !important;
  padding: 22px 14px !important;
  background: rgba(255,255,255,.05) !important;
  color: #c9dde0 !important;
  border: 1px dashed rgba(255,255,255,.18) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
}

@media (max-width: 380px) {
  body:has(.favorites-page) .favorites-list {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }

  body:has(.favorites-page) .favorite-card {
    min-height: 76px !important;
  }
}


/* =========================================================
   PLUS — VERSION FINALE
   Titre fixe + liste légère, cohérente avec les autres pages
   ========================================================= */

/* Réserver la place du bandeau fixe */
.plus-page {
  padding-top: calc(76px + env(safe-area-inset-top, 0px)) !important;
}

/* Titre Plus fixé en haut */
.plus-head {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 1500 !important;
  width: 100% !important;
  height: calc(66px + env(safe-area-inset-top, 0px)) !important;
  margin: 0 !important;
  padding: calc(8px + env(safe-area-inset-top, 0px)) 16px 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(180deg, var(--fihirana-brand) 0%, var(--fihirana-brand-dark) 100%) !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(0,0,0,.08) !important;
  box-shadow: 0 3px 14px rgba(0,73,80,.16) !important;
}

.plus-head h1 {
  margin: 0 !important;
  padding: 0 !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  font-size: 1.04rem !important;
  font-weight: 850 !important;
  line-height: 1.2 !important;
  text-align: center !important;
  letter-spacing: 0 !important;
  text-shadow: 0 1px 1px rgba(0,0,0,.08) !important;
}

/* Supprimer tout éventuel texte explicatif */
.plus-head p {
  display: none !important;
}

/* Liste */
body:has(.plus-page) .plus-list,
html[data-theme="dark"] body:has(.plus-page) .plus-list {
  display: block !important;
  margin: 0 !important;
  padding: 10px 22px calc(105px + env(safe-area-inset-bottom, 0px)) !important;
}

/* Une ligne sobre par entrée */
body:has(.plus-page) .plus-card,
html[data-theme="dark"] body:has(.plus-page) .plus-card {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  min-height: 86px !important;
  margin: 0 !important;
  padding: 16px 4px !important;
  background: transparent !important;
  color: #f7fbfc !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,.34) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-decoration: none !important;
}

body:has(.plus-page) .plus-card:last-child {
  border-bottom: 0 !important;
}

body:has(.plus-page) .plus-card > div {
  min-width: 0 !important;
}

/* Titres visibles */
body:has(.plus-page) .plus-card strong,
html[data-theme="dark"] body:has(.plus-page) .plus-card strong {
  display: block !important;
  margin: 0 0 4px !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  opacity: 1 !important;
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
}

/* Descriptions */
body:has(.plus-page) .plus-card span:not(.plus-arrow),
html[data-theme="dark"] body:has(.plus-page) .plus-card span:not(.plus-arrow) {
  display: block !important;
  color: #c8d7da !important;
  -webkit-text-fill-color: #c8d7da !important;
  opacity: 1 !important;
  font-size: .88rem !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
}

/* Chevron doré */
body:has(.plus-page) .plus-arrow,
html[data-theme="dark"] body:has(.plus-page) .plus-arrow {
  flex: 0 0 auto !important;
  color: #F2A900 !important;
  -webkit-text-fill-color: #F2A900 !important;
  opacity: 1 !important;
  font-size: 1.65rem !important;
  font-weight: 400 !important;
  line-height: 1 !important;
}

/* En sombre, même bandeau que les chants */
html[data-theme="dark"] .plus-head {
  background: rgba(7,54,66,.96) !important;
  border-bottom-color: rgba(255,255,255,.12) !important;
  box-shadow: none !important;
}

@media (max-width: 380px) {
  .plus-page {
    padding-top: calc(74px + env(safe-area-inset-top, 0px)) !important;
  }

  .plus-head {
    height: calc(64px + env(safe-area-inset-top, 0px)) !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  body:has(.plus-page) .plus-list {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
}

/* =========================================================
   V FINAL — BLEU PÉTROLE UNIFIÉ + RETOUR
   Footer et bandeaux supérieurs : même couleur sobre.
   ========================================================= */
:root {
  --fihirana-brand: #073642 !important;
  --fihirana-brand-dark: #073642 !important;
  --fihirana-brand-soft: #edf3f4 !important;
  --fihirana-header: #073642;
}

/* Footer : même bleu pétrole sur toutes les pages et tous les thèmes. */
.bottom-nav,
body:has(.home-page) .bottom-nav,
body:not(:has(.home-page)) .bottom-nav,
html[data-theme="dark"] .bottom-nav,
html[data-theme="dark"] body:has(.home-page) .bottom-nav,
html[data-theme="dark"] body:not(:has(.home-page)) .bottom-nav {
  background: var(--fihirana-header) !important;
  border-top: 0 !important;
  box-shadow: 0 -3px 12px rgba(7,54,66,.14) !important;
}

/* Bandeaux supérieurs : exactement la même couleur que le footer. */
.search-hero,
.categories-head,
.favorites-head,
.plus-head,
.chant-simple-header,
.chant-header-v47,
.chant-header-v52,
html[data-theme="dark"] .search-hero,
html[data-theme="dark"] .categories-head,
html[data-theme="dark"] .favorites-head,
html[data-theme="dark"] .plus-head,
html[data-theme="dark"] .chant-simple-header {
  background: var(--fihirana-header) !important;
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: 0 2px 8px rgba(7,54,66,.12) !important;
}

/* Titres toujours bien centrés malgré la flèche à gauche. */
.search-hero,
.categories-head,
.favorites-head,
.plus-head {
  position: fixed !important;
}

.search-hero h1,
.categories-head h1,
.favorites-head h1,
.plus-head h1,
.chant-simple-header h1,
.chant-simple-header #chantTitle {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Flèche retour discrète, sans gros bouton autour. */
.app-back-btn {
  position: absolute !important;
  left: 12px !important;
  top: calc(50% + env(safe-area-inset-top, 0px) / 2) !important;
  transform: translateY(-50%) !important;
  z-index: 5 !important;
  width: 42px !important;
  height: 42px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  box-shadow: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font: inherit !important;
  cursor: pointer !important;
  -webkit-tap-highlight-color: transparent !important;
}

.app-back-btn .app-back-arrow {
  display: block !important;
  font-size: 29px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  transform: translateY(-1px) !important;
}

.app-back-btn:active {
  opacity: .62 !important;
  transform: translateY(-50%) scale(.92) !important;
}

/* La page chant possède déjà sa flèche : même rendu discret. */
.chant-simple-header .back-btn,
.chant-header-v47 .back-btn,
.chant-header-v52 .back-btn {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

.chant-simple-header .back-btn i,
.chant-header-v47 .back-btn i,
.chant-header-v52 .back-btn i {
  color: #ffffff !important;
}

@media (max-width: 380px) {
  .app-back-btn {
    left: 8px !important;
    width: 40px !important;
    height: 40px !important;
  }
  .app-back-btn .app-back-arrow {
    font-size: 27px !important;
  }
}

/* ===== RECHERCHE — anthracite cohérent Réglages / Plus ===== */
body:has(.search-page), .search-page { background:#111820 !important; color:#f7f9fa !important; }
.search-hero { background:#073642 !important; background-image:none !important; }
.search-panel { background:transparent !important; border:0 !important; box-shadow:none !important; }
.search-input-wrap { background:transparent !important; }
.search-page #searchInput { background:#252d35 !important; background-color:#252d35 !important; color:#fff !important; -webkit-text-fill-color:#fff !important; border:1px solid #3b4650 !important; caret-color:#fff !important; box-shadow:none !important; }
.search-page #searchInput::placeholder { color:#aeb8c0 !important; -webkit-text-fill-color:#aeb8c0 !important; }
.search-page #searchInput:focus { background:#2c353e !important; border-color:#69757f !important; box-shadow:0 0 0 3px rgba(255,255,255,.05) !important; }
.search-status { color:#b9c2c9 !important; }
.search-result { background:#202830 !important; color:#fff !important; border:1px solid #343e47 !important; border-radius:14px !important; box-shadow:none !important; margin-bottom:10px !important; padding:15px 16px !important; }
.search-title { color:#fff !important; -webkit-text-fill-color:#fff !important; }
.search-excerpt { color:#b8c1c8 !important; -webkit-text-fill-color:#b8c1c8 !important; }
.search-number, .search-open { background:#303942 !important; color:#e5e9ec !important; -webkit-text-fill-color:#e5e9ec !important; border-color:#46515b !important; }
body:has(.search-page) .bottom-nav { background:#073642 !important; background-image:none !important; }