/* styles.css - Design avec valeurs CSS natives (sans variables :root) */

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

html, body {
  width: 100%;
  height: 100vh;   /* fallback anciens WebView */
  height: 100dvh;  /* hauteur écran réelle, s'ajuste à la barre Samsung */
  overflow: hidden;
  font-family: Roboto, system-ui, sans-serif;
  background: #000000;
  color: #ffffff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.slider-container {
  position: relative;
  width: 100%;
  height: 100vh;   /* fallback anciens WebView */
  height: 100dvh;  /* au lieu de 100% : s'accroche au plein écran réel */
  overflow: hidden;
  background: #000000;
}

.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transform: translateX(100%);
  transition: all 0.6s cubic-bezier(0.4, 0.0, 0.2, 1);
  will-change: transform, opacity;
}

.slide.active {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
  z-index: 2;
}

.slide.prev {
  transform: translateX(-100%);
  opacity: 0;
  z-index: 1;
}

.slide.next {
  transform: translateX(100%);
  opacity: 0;
  z-index: 1;
}

.slide.entering {
  animation: slideIn 0.6s cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
}

.slide.exiting {
  animation: slideOut 0.6s cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
}

@keyframes slideIn {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideOut {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(-100%);
    opacity: 0;
  }
}

.slide-content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: 4rem 2rem;
  overflow-y: auto;
  overflow-x: hidden;
}

.slide-content::-webkit-scrollbar {
  width: 8px;
}

.slide-content::-webkit-scrollbar-track {
  background: rgba(212, 206, 193, 0.3);
  border-radius: 10px;
}

.slide-content::-webkit-scrollbar-thumb {
  background: #8b6f47;
  border-radius: 10px;
  transition: background 0.3s ease;
}

.slide-content::-webkit-scrollbar-thumb:hover {
  background: #a58963;
}

.welcome-screen {
  text-align: center;
  width: 100%;
  max-width: 480px;
  height: 100%;          /* occupe exactement la hauteur dispo */
  overflow: hidden;      /* zéro scroll sur la page d'accueil */
  animation: fadeInUp 1s cubic-bezier(0.4, 0.0, 0.2, 1);
  background: #000000;
  padding: clamp(10px,2.5vh,20px) 1.1rem clamp(8px,1.5vh,14px);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  gap: 0;
  box-sizing: border-box;
}

/* Scrollbar welcome-screen */
.welcome-screen::-webkit-scrollbar { width: 6px; }
.welcome-screen::-webkit-scrollbar-track { background: rgba(0,255,255,0.05); border-radius: 6px; }
.welcome-screen::-webkit-scrollbar-thumb { background: rgba(0,255,255,0.25); border-radius: 6px; }
.welcome-screen::-webkit-scrollbar-thumb:hover { background: rgba(0,255,255,0.45); }

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.main-title {
  font-family: Roboto, system-ui, sans-serif;
  font-size: clamp(1.6rem, 7vw, 2.8rem);
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 0;
  letter-spacing: -0.02em;
  line-height: 1.1;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.subtitle {
  font-size: clamp(1.1rem, 2.5vw, 1.5rem);
  color: #00ffff;
  margin-bottom: 3rem;
  font-weight: 300;
  letter-spacing: 0.01em;
}

.navigation-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  color: #00ffff;
  animation: pulse 2s ease-in-out infinite;
}

.navigation-hint p {
  color: #ffffff;
}

.book-info {
  font-size: 1.2rem;
  color: #00ffff;
  margin-top: 1rem;
  font-weight: 400;
}

/* Modale custom */
.custom-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.custom-modal-content {
  background: #1a1a1a;
  padding: 2rem;
  border-radius: 16px;
  border: 2px solid #00ffff;
  max-width: 90%;
  width: 400px;
  text-align: center;
  box-shadow: 0 10px 40px rgba(0, 255, 255, 0.5);
  animation: slideUp 0.3s ease;
}

@keyframes slideUp {
  from {
    transform: translateY(30px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.custom-modal-content p {
  color: #ffffff;
  font-size: 1.1rem;
  margin-bottom: 1.5rem;
  line-height: 1.6;
}

.custom-modal-content button {
  background: #00ffff;
  color: #000000;
  border: none;
  padding: 0.8rem 2rem;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  outline: none;
  -webkit-appearance: none;
  transition: all 0.3s ease;
}

.custom-modal-content button:hover {
  background: #00cccc;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 255, 255, 0.5);
}

.custom-modal-content button:active {
  transform: translateY(0);
}

.navigation-hint svg {
  animation: slideRight 1.5s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

@keyframes slideRight {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(10px); }
}

.chapter {
  width: 100%;
  height: 100%;
  background: #000000;
  color: #ffffff;
  animation: fadeInScale 0.8s cubic-bezier(0.4, 0.0, 0.2, 1);
  position: absolute;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

.chapter::-webkit-scrollbar {
  width: 8px;
}

.chapter::-webkit-scrollbar-track {
  background: rgba(212, 206, 193, 0.3);
  border-radius: 10px;
  margin: 1rem 0;
}

.chapter::-webkit-scrollbar-thumb {
  background: #8b6f47;
  border-radius: 10px;
  transition: background 0.3s ease;
}

.chapter::-webkit-scrollbar-thumb:hover {
  background: #a58963;
}

.chapter::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #8b6f47 0%, #a58963 50%, #8b6f47 100%);
}

@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.chapter-title {
  font-family: Roboto, system-ui, sans-serif;
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  font-weight: 700;
  margin-bottom: 2.5rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
  border-bottom: 2px solid #d4cec1;
  padding-bottom: 1.5rem;
  padding-top: 1.5rem;
  padding-left: 1.5rem;
  position: sticky;
  top: 0px;
  background-color: #1a1a1a;
  color: #ffffff;
  z-index: 100;
}

.verses {
  display: flex;
  flex-direction: column;
  color: #ffffff;
  padding: 0 1.5rem 2rem 1.5rem;
}

.verse {
  display: block;
  padding: 0.3rem 0;
  margin-bottom: 0.8rem;
  transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
  position: relative;
  animation: fadeInVerse 0.6s cubic-bezier(0.4, 0.0, 0.2, 1) backwards;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}

.verse:hover {
  transform: translateX(4px);
}

@keyframes fadeInVerse {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.verse:nth-child(1) { animation-delay: 0.1s; }
.verse:nth-child(2) { animation-delay: 0.15s; }
.verse:nth-child(3) { animation-delay: 0.2s; }
.verse:nth-child(4) { animation-delay: 0.25s; }
.verse:nth-child(5) { animation-delay: 0.3s; }
.verse:nth-child(n+6) { animation-delay: 0.35s; }

.verse-number {
  display: inline;
  color: #00ffff;
  font-weight: 700;
  font-size: 1.5rem;
  margin-right: 0.5rem;
  line-height: 1.6;
}

.verse-text {
  display: inline;
  font-size: 1.5rem;
  line-height: 1.6;
  color: #ffffff;
  font-weight: 400;
}

.quick-nav {
  position: fixed;
  top: 2rem;
  right: 2rem;
  z-index: 1000;
}

.btn {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
  padding: 6px;                 /* espace cadre ↔ icône (ajuste ici) */
  border-radius: 12px;
  transition: all 0.3s ease;
  background: #0c1021;                          /* fond sombre */
  border: 1px solid rgba(0, 255, 255, 0.6);     /* UN seul liseré, fin */
  box-shadow: 0 0 6px rgba(0, 255, 255, 0.25);  /* halo diffus (pas un 2e anneau) */
  outline: none;
}

.btn:focus {
  outline: none;            /* plus de gros cadre carré au tap (Android) */
}

.btn:focus-visible {
  outline: 2px solid #00ffff;   /* gardé uniquement pour le clavier */
  outline-offset: 2px;
}

.btn svg {
  display: block;
  width: 50px;
  height: 50px;
  filter: drop-shadow(0 0 5px rgba(0, 255, 255, 0.3));
}

.line {
  fill: none;
  stroke: #00ffff;
  stroke-width: 10px;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.line.top, .line.bottom {
  stroke-dasharray: 50px 600px;
  stroke-dashoffset: 0px;
}

.line.cross {
  stroke-dasharray: 50px 60px;
  stroke-dashoffset: 0px;
}

/* Animation quand actif */
.ligneberger .line.top, 
.ligneberger .line.bottom {
  stroke-dasharray: 70.71px 600px;
  stroke-dashoffset: -392px;
}

.ligneberger .line.cross {
  stroke-dasharray: 50px 60px;
  stroke-dashoffset: 51px;
}

/* Transitions */
.line.cross {
  transition: 0.35s stroke-dasharray ease 0.35s, 
              0.35s stroke-dashoffset ease 0.35s, 
              0.35s stroke ease 0s;
}

.line.top {
  transition: 0.525s stroke-dasharray ease 0s, 
              0.525s stroke-dashoffset ease 0s, 
              0.35s stroke ease 0s;
}

.line.bottom {
  transition: 0.525s stroke-dasharray ease 0.35s, 
              0.525s stroke-dashoffset ease 0.35s, 
              0.35s stroke ease 0s;
}

.ligneberger .line.cross {
  transition: 0.35s stroke-dasharray ease 0s, 
              0.35s stroke-dashoffset ease 0s, 
              0.35s stroke ease 0s;
}

.quick-nav-panel {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  background: #1a1a1a;
  padding: 1.5rem;
  border-radius: 16px;
  box-shadow: 0 10px 40px rgba(0, 255, 255, 0.3);
  border: 1px solid #00ffff;
  width: 90%;
  max-width: 400px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s cubic-bezier(0.4, 0.0, 0.2, 1),
              visibility 0.3s cubic-bezier(0.4, 0.0, 0.2, 1),
              transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1),
              padding-bottom 0.35s cubic-bezier(0.4, 0.0, 0.2, 1);
  max-height: 85vh;
  overflow: visible;
  z-index: 999;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

/* Conteneur interne scrollable (hors dropdowns) */
.quick-nav-panel-inner {
  overflow-y: auto;
  overflow-x: hidden;
  max-height: calc(85vh - 3rem);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.quick-nav-close {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  width: 36px;
  height: 36px;
  background: transparent;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  outline: none;
  -webkit-appearance: none;
  transition: transform 0.15s ease, background 0.15s ease;
  flex-shrink: 0;
  color: #ff0000;
}

.quick-nav-close:hover {
  transform: scale(1.1);
  background: transparent;
  border-color: transparent;
}

.quick-nav-close svg {
  display: block;
  flex-shrink: 0;
}

/* Ligne search + fermeture côte à côte */
.search-close-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 0;
  width: 100%;
  padding: 0 4px;
  box-sizing: border-box;
}
.search-close-row #bsearchBar {
  flex-shrink: 0;
}
.search-close-row #navPanelSwitch {
  flex-shrink: 0;
}
/* ── Groupe toggle "Modale Options" ── */
#verseModalSwitchGroup {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}
#verseModalSwitch {
  /* identique au navPanelSwitch – pas de style supplémentaire */
}
.search-close-row .quick-nav-close {
  flex-shrink: 0;
}

.quick-nav-panel-inner::-webkit-scrollbar {
  width: 8px;
}

.quick-nav-panel-inner::-webkit-scrollbar-track {
  background: rgba(0, 255, 255, 0.1);
  border-radius: 10px;
}

.quick-nav-panel-inner::-webkit-scrollbar-thumb {
  background: #00ffff;
  border-radius: 10px;
}

.quick-nav-panel.active {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
}

.quick-nav-panel h3 {
  font-family: Roboto, system-ui, sans-serif;
  font-size: 1.3rem;
  margin-bottom: 1.5rem;
  color: #ffffff;
  text-align: center;
}

.book-selector {
  margin-bottom: 0;
  margin-top: 10px;
}

.book-selector label {
  display: block;
  color: #00ffff;
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.book-select {
  width: 100%;
  padding: 0.8rem;
  background: #000000;
  color: #ffffff;
  border: 2px solid #00ffff;
  border-radius: 8px;
  font-size: 1rem;
  font-family: Roboto, system-ui, sans-serif;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  outline: none;
  transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
  appearance: none;        /* standard */
  -webkit-appearance: none; /* Chrome / Safari */
  -moz-appearance: none;    /* Firefox */
  background: none;         /* enlève certains styles */
}

.book-select:hover {
  background: #0a0a0a;
  border-color: #00ffff;
  box-shadow: 0 0 10px rgba(0, 255, 255, 0.3);
}

.book-select:focus {
  outline: none;
  border-color: #00ffff;
  background: #0a0a0a;
  box-shadow: 0 0 15px rgba(0, 255, 255, 0.5);
}

.book-select option {
  background: #000000;
  color: #ffffff;
  padding: 0.5rem;
}

.book-select option[value=""] {
  text-align: center;
}

.book-select optgroup {
  background: #1a1a1a;
  color: #00ffff;
  font-weight: bold;
  font-style: normal;
}

.quick-nav-panel .chapter-indicator {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.2rem;
  font-weight: 600;
  color: #ffffff;
  justify-content: center;
  margin-bottom: 1.5rem;
  padding: 1rem;
  background: #000000;
  border-radius: 8px;
  border: 1px solid #00ffff;
}

.quick-nav-panel #currentChapter {
  color: #00ffff;
  font-size: 1.5rem;
}

.quick-nav-panel .separator {
  color: #888888;
}

.quick-nav-panel #totalChapters {
  color: #888888;
  font-size: 1rem;
}

.quick-nav-panel input {
  width: 100%;
  padding: 0.8rem 1rem;
  border: 2px solid #00ffff;
  border-radius: 8px;
  font-size: 1rem;
  font-family: Roboto, system-ui, sans-serif;
  margin-bottom: 1rem;
  transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
  background: #000000;
  color: #ffffff;
}

.quick-nav-panel input:focus {
  outline: none;
  border-color: #00ffff;
  background: #0a0a0a;
}

.quick-nav-panel > button,
#gotoBookBtnHome {
  width: 100%;
  padding: 0.8rem 1rem;
  background: #2b2821;
  color: #d4bf7f;	
  border: none;
  border-radius: 8px;
  border: 1px solid rgba(0, 255, 255, 0.2);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  outline: none;
  -webkit-appearance: none;
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  font-family: Roboto, system-ui, sans-serif;
  margin-bottom: 0;
}

.quick-nav-panel > button:hover,
#gotoBookBtnHome:hover {
  background: #00cccc;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 255, 255, 0.5);
}

.quick-nav-panel > button:active {
  transform: translateY(0);
}

/* Bouton "Aller au chapitre" */
#gotoBookBtn,
#gotoBookBtnHome {
  background: #075f47 !important;
  color: #d2c248 !important;
  border: none !important;
}
#gotoBookBtn:hover,
#gotoBookBtnHome:hover {
  background: #054f3b !important;
  box-shadow: 0 4px 12px rgba(7, 95, 71, 0.5) !important;
}

/* Indicateur de position */
.position-indicator {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(26, 26, 26, 0.95);
  padding: 0.8rem 1.5rem;
  border-radius: 50px;
  border: 2px solid #00ffff;
  box-shadow: 0 4px 20px rgba(0, 255, 255, 0.3);
  z-index: 900;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  pointer-events: none;
}

.position-indicator.show {
  opacity: 1;
  visibility: visible;
}

.position-indicator span {
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 600;
  text-align: center;
  display: block;
  white-space: nowrap;
}

.loading-indicator {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.loading-indicator.active {
  opacity: 1;
  visibility: visible;
}

.spinner {
  width: 50px;
  height: 50px;
  border: 4px solid #d4cec1;
  border-top-color: #8b6f47;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@media (max-width: 768px) {
  .slide-content {
    padding: 2rem 1.5rem;
  }

  .chapter-title {
    font-size: 1.6rem;
    margin-bottom: 1.5rem;
  }

  .verse {
    padding: 0.3rem 0;
    margin-bottom: 0.6rem;
  }

  .verse-number {
    font-size: 1.3rem;
  }

  .verse-text {
    font-size: 1.3rem;
  }

  .quick-nav {
    top: 1rem;
    right: 1rem;
  }

  .btn svg {
    width: 45px;
    height: 45px;
  }

  .quick-nav-panel {
    width: 92%;
    max-width: none;
    padding: 1.5rem;
    max-height: 90vh;
  }
  .quick-nav-panel-inner {
    max-height: calc(90vh - 3rem);
  }

  .quick-nav-panel h3 {
    font-size: 1.2rem;
  }

  .quick-nav-panel .chapter-indicator {
    font-size: 1rem;
    padding: 0.8rem;
  }

  .quick-nav-panel #currentChapter {
    font-size: 1.3rem;
  }

  .book-selector label {
    font-size: 0.85rem;
  }

  .book-select {
    padding: 0.7rem;
    font-size: 0.95rem;
  }

  .position-indicator {
    bottom: 1.5rem;
    padding: 0.7rem 1.2rem;
  }

  .position-indicator span {
    font-size: 0.9rem;
  }
}

@media (max-width: 480px) {
  .main-title {
    font-size: 2rem;
  }

  .subtitle {
    font-size: 1rem;
  }

  .quick-nav {
    top: 0.75rem;
    right: 0.75rem;
  }

  .btn svg {
    width: 40px;
    height: 40px;
  }

  .quick-nav-panel {
    width: 95%;
    padding: 1.2rem;
    max-height: 92vh;
  }
  .quick-nav-panel-inner {
    max-height: calc(92vh - 2.4rem);
  }

  .quick-nav-panel h3 {
    font-size: 1.1rem;
    margin-bottom: 1rem;
  }

  .quick-nav-panel .chapter-indicator {
    font-size: 0.9rem;
    padding: 0.7rem;
    margin-bottom: 1rem;
  }

  .quick-nav-panel #currentChapter {
    font-size: 1.1rem;
  }

  .quick-nav-panel #totalChapters {
    font-size: 0.85rem;
  }

  .book-selector {
    margin-bottom: 1rem;
  }

  .book-selector label {
    font-size: 0.8rem;
    margin-bottom: 0.4rem;
  }

  .book-select {
    padding: 0.6rem;
    font-size: 0.9rem;
  }

  .quick-nav-panel input {
    padding: 0.7rem;
    font-size: 0.95rem;
  }

  .quick-nav-panel > button {
    padding: 0.7rem;
    font-size: 0.95rem;
  }

  .position-indicator {
    bottom: 1rem;
    padding: 0.6rem 1rem;
  }

  .position-indicator span {
    font-size: 0.85rem;
  }
}

.slider-container.swiping .slide.active {
  transition: none;
}

::selection {
  background: #8b6f47;
  color: #ffffff;
}

::-moz-selection {
  background: #8b6f47;
  color: #ffffff;
}

/* ============================================
   VERSETS ANNOTÉS
   ============================================ */

.verse--has-note {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  outline: none;
  -webkit-appearance: none;
  position: relative;
}

.verse--has-note:hover {
  background: rgba(252, 154, 70, 0.08);
  border-radius: 6px;
  padding-left: 6px;
  margin-left: -6px;
}

/* Numéro de verset en orange pour signaler une annotation */
.verse--has-note .verse-number {
  color: #fc9a46;
}

/* Modale Options désactivée (switch sur OFF) : tous les numéros de versets
   repassent en cyan pour indiquer que le mode annotation n'est plus accessible. */
body.verse-modal-disabled .verse--has-note .verse-number {
  color: #00ffff;
}

/* Bouton "Note de chapitre" dans le titre */
.chapter-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.btn-texte-chapitre {
  display: inline-flex;
  align-items: center;
  gap: 0;
  background: linear-gradient(135deg, rgba(0,229,200,0.10) 0%, rgba(0,180,160,0.05) 100%);
  border: 1px solid rgba(0,229,200,0.35);
  border-radius: 12px;
  padding: 0;
  font-family: Roboto, system-ui, sans-serif;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  outline: none;
  -webkit-appearance: none;
  white-space: nowrap;
  transition: background 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease, transform 0.15s ease;
  flex-shrink: 0;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,229,200,0.08), inset 0 1px 0 rgba(255,255,255,0.06);
  position: relative;
}

/* Icône à gauche — fond accentué */
.btn-texte-chapitre__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  background: rgba(0,229,200,0.15);
  border-right: 1px solid rgba(0,229,200,0.20);
  color: #00e5c8;
  flex-shrink: 0;
  transition: background 0.22s ease, color 0.22s ease;
}

/* Texte central */
.btn-texte-chapitre__label {
  padding: 0 10px 0 10px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.82);
  transition: color 0.22s ease;
}

/* Chevron à droite */
.btn-texte-chapitre__chevron {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-right: 9px;
  color: rgba(0,229,200,0.55);
  transition: color 0.22s ease, transform 0.22s ease;
}

.btn-texte-chapitre:hover {
  background: linear-gradient(135deg, rgba(0,229,200,0.18) 0%, rgba(0,180,160,0.10) 100%);
  border-color: rgba(0,229,200,0.65);
  box-shadow: 0 3px 16px rgba(0,229,200,0.20), inset 0 1px 0 rgba(255,255,255,0.10);
  transform: translateY(-1px);
}
.btn-texte-chapitre:hover .btn-texte-chapitre__icon {
  background: rgba(0,229,200,0.25);
  color: #00ffee;
}
.btn-texte-chapitre:hover .btn-texte-chapitre__label {
  color: #ffffff;
}
.btn-texte-chapitre:hover .btn-texte-chapitre__chevron {
  color: #00e5c8;
  transform: translateX(2px);
}
.btn-texte-chapitre:active {
  transform: translateY(0px) scale(0.97);
}

/* ============================================
   VERSE MODAL — centré comme quick-nav-panel
   ============================================ */

.verse-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  z-index: 5000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  padding: 1rem;
}

.verse-modal-overlay.verse-modal-visible {
  opacity: 1;
}

.verse-modal-overlay.verse-modal-visible .verse-modal {
  transform: translateY(0) scale(1);
}

.verse-modal {
  background: #0c1021;
  width: 100%;
  max-width: 600px;
  max-height: 85vh;
  border-radius: 18px;
  border: 2px solid #00ffff;
  box-shadow: 0 0 40px rgba(0, 255, 255, 0.25);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateY(20px) scale(0.97);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================
   MODALES CENTRÉES GÉNÉRIQUES (OPTIONS / BLOC-NOTES)
   ============================================ */

.centered-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.80);
  z-index: 6000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  opacity: 0;
  transition: opacity 0.25s ease;
  /* Empêche la sélection de texte + le menu natif Android (Copier/Partager/
     Tout sélectionner) et le pop-up Google déclenchés par l'appui long qui
     « retombe » sur la modale ouverte sous le doigt en lecture seule. */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* La protection cascade sur tout le contenu de la modale (titre, aperçu…) */
.centered-modal-overlay * {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.centered-modal-overlay.cmo-visible {
  opacity: 1;
}

.centered-modal-overlay.cmo-visible .centered-modal-panel {
  transform: translateY(0) scale(1);
}

.centered-modal-panel {
  background: #1f1e1e;
  width: 100%;
  max-width: 420px;
  border-radius: 16px;
  border: 1.5px solid #00ffff;
  box-shadow: 0 0 40px rgba(0, 255, 255, 0.3);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateY(20px) scale(0.97);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  max-height: 90vh;
}

/* Header commun */
.cmp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 12px 16px;
  background: #111;
  border-bottom: 1px solid rgba(0, 255, 255, 0.25);
  border-top: 1px solid rgba(0, 255, 255, 0.25);
  flex-shrink: 0;
}

.cmp-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: Roboto, system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: #00ffff;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Titre agrandi uniquement pour la modale Options */
.options-panel .cmp-title {
  font-size: 1.25rem;
}

/* ── Bloc-Notes : compteur doré juste à droite du titre ── */
.bn-title-count {
  display: inline-grid;
  overflow: hidden;
  color: #edaa28;
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.1;
  border: 1px solid #00ffff;
  border-radius: 6px;
  padding: 2px 10px;
}

.bn-title-count .bn-count-roll {
  grid-area: 1 / 1;          /* tous les chiffres se superposent dans la même cellule */
  text-align: center;
  transition: transform 0.35s cubic-bezier(0.34, 1.2, 0.4, 1),
              opacity 0.35s ease;
}

.cmp-close {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  outline: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  line-height: 0;
}

/* Bouton de fermeture de la fenêtre Synthèse vocale agrandi (était 30×30).
   Le CSS prime sur les attributs width/height="30" du SVG. */
.tts-panel .cmp-close svg {
  width: 44px;
  height: 44px;
}

/* Bouton de fermeture de la fenêtre de sélection de versets agrandi (était 30×30). */
.verse-picker-panel .cmp-close svg {
  width: 44px;
  height: 44px;
}

/* ── OPTIONS PANEL ── */
.options-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 14px 0;
  overflow: hidden;
}
.options-panel::-webkit-scrollbar { width: 6px; }
.options-panel::-webkit-scrollbar-thumb { background: rgba(0,255,255,0.3); border-radius: 6px; }

/* Wrapper "Copier" toujours visible */
.options-actions-always.options-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0;
  padding: 0 18px;
  flex-shrink: 0;
}

/* Trois éléments d'action (doc bleu · flèche · carnet vert) — tailles fixes, glow débordant */
.opt-act {
  flex: 0 0 auto;
  display: block;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  overflow: visible;
  line-height: 0;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}
.opt-act > svg, .opt-act-svg { display: block; width: 100%; height: auto; overflow: visible; }
.opt-doc-blue  { width: 60px; }
.opt-arrow     { width: 59px; cursor: default; pointer-events: none; }
.opt-doc-green { width: 64px; }

/* Animations coche / croix (déplacées hors du SVG) */
@keyframes cpDrawCircle { to { stroke-dashoffset: 25; } }
@keyframes cpDrawCheck  { to { stroke-dashoffset: 0; } }
@keyframes cpDrawX      { to { stroke-dashoffset: 0; } }
@keyframes cpShake { 0%{transform:translateX(0)} 20%{transform:translateX(-4px)} 40%{transform:translateX(4px)} 60%{transform:translateX(-4px)} 80%{transform:translateX(4px)} 100%{transform:translateX(0)} }
.opt-arrow .cp-circle { fill:none; stroke:#00ff88; stroke-width:8; stroke-linecap:round; stroke-dasharray:239; stroke-dashoffset:239; animation: cpDrawCircle 1.4s ease forwards; }
.opt-arrow .cp-check  { fill:none; stroke:#00ff88; stroke-width:10; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:155; stroke-dashoffset:155; animation: cpDrawCheck 1s ease forwards 1.2s; }
.opt-arrow .cp-x1 { stroke-dasharray:72; stroke-dashoffset:72; animation: cpDrawX 0.5s ease forwards; }
.opt-arrow .cp-x2 { stroke-dasharray:72; stroke-dashoffset:72; animation: cpDrawX 0.5s ease forwards 0.3s; }
.bn-cross-anim { animation: cpShake 0.4s; }

.options-verse-preview {
  background: rgba(0,255,255,0.05);
  border: 1px solid rgba(0, 255, 255, 0.25);
  border-radius: 10px;
  flex-shrink: 0;
  max-height: 90px;
  overflow-y: auto;
  scroll-behavior: smooth;
  box-sizing: border-box;
  margin: 0 16px;
}
.options-verse-inner {
  padding: 10px 14px;
}
/* NOTE : anciennes règles de repli supprimées.
   Le sélecteur [style*="height: 0"] matchait aussi "min-height: 0px"
   (posé par le grid-trick d'animation) et effaçait la bordure du bloc
   pourtant visible. Le repli est désormais géré par le wrapper grid
   (grid-template-rows:0fr + overflow:hidden), qui masque tout proprement,
   et la marge de l'aperçu est neutralisée dans wrapForAnim (script.js). */
.options-verse-preview::-webkit-scrollbar { width: 5px; }
.options-verse-preview::-webkit-scrollbar-thumb { background: rgba(0,255,255,0.25); border-radius: 4px; }

/* Exclure l'aperçu du zoom global */
#optionsPreviewText {
  font-size: 1.2rem !important;
}
.options-verse-preview .verse-number {
  font-size: 1.2rem !important;
}

.options-actions {
  display: flex;
  justify-content: space-evenly;
  gap: 8px;
  padding: 0 16px;
  flex-shrink: 0;
}

.opt-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0.6rem 0.8rem;
  border-radius: 8px;
  border: none;
  font-size: 0.88rem;
  font-weight: 800;
  cursor: pointer;
  -webkit-appearance: none;
  transition: all 0.2s ease;
  font-family: Roboto, system-ui, sans-serif;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}

.opt-btn-copy {
  background: transparent;
  border: none;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  /* boîte = boîte du SVG : sert d'ancrage aux 2 zones de clic + au compteur */
  position: relative;
  display: block;
  flex: 0 1 200px;
  max-width: 200px;
  margin: 0;
}
.opt-btn-copy svg {
  width: 100%;
  max-width: 200px;
  height: auto;
  display: block;
}
.copy-svg-holder { display: block; width: 100%; line-height: 0; }

/* ── 2 zones de clic transparentes superposées ──
   gauche (document bleu) = enregistrer · droite (carnet vert + compteur) = ouvrir le bloc-notes */
.copy-hit {
  position: absolute;
  top: 0; bottom: 0;
  background: transparent;
  border: 0; padding: 0; margin: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  z-index: 2;
}
.copy-hit:active { opacity: 0.6; }
.copy-hit-left  { left: 0;  width: 58%; }
.copy-hit-right { right: 0; width: 42%; }

/* ── Compteur (badge) posé en bas-droite du carnet vert ──
   pointer-events:none → le clic traverse vers la zone droite (ouvrir le bloc-notes).
   👉 Pour ajuster finement la position du badge, modifie `right` et `bottom`. */
/* ── Compteur d'incrémentation INTÉGRÉ au SVG du bouton copier ──
   (élément <svg> imbriqué dans le carnet vert ; n'est plus un overlay HTML) */
svg.bn-counter-svg { display: initial; margin: 0; overflow: visible; }
/* Anneau sombre autour du badge intégré : "fossé" pour que le cadre vert ne touche
   jamais le cercle en fin de course. Fond noir à l'intérieur du cercle. */
svg.bn-counter-svg .bn-c-ring { fill: #1f1e1e; stroke: none; }
svg.bn-counter-svg .bn-c-bg   { fill: #000; }
svg.bn-counter-svg .bn-c-number {
  fill: #00ffff;
  font-size: 19px;
  font-weight: 600;
  transform: none;
}
svg.bn-counter-svg.bn-counter-error-anim { transform-box: fill-box; }

.opt-btn-note {
  background: linear-gradient(175deg, #0d1e26 0%, #060e14 60%, #030a10 100%);
  color: #00eeff;
  border: none;
  padding: 0;
  min-height: 52px;
  position: relative;
  overflow: visible;
  border-radius: 18px;
  transform: rotateX(10deg) rotateY(-2deg);
  transform-style: preserve-3d;
  box-shadow:
    inset 0 1px 0 rgba(0,255,255,.18),
    inset 0 -4px 12px rgba(0,0,0,.9),
    0 0 0 1px rgba(0,230,255,.32),
    0 0 16px rgba(0,200,255,.10),
    0 10px 24px rgba(0,0,0,.7);
}

/* Contour premium dégradé */
.opt-btn-note::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 18px;
  padding: 1px;
  background: linear-gradient(130deg,
    rgba(0,255,255,.9) 0%,
    rgba(120,220,255,.4) 30%,
    rgba(0,80,120,.1) 55%,
    rgba(0,200,255,.6) 80%,
    rgba(0,255,255,.85) 100%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* Reflet glass supérieur */
.opt-btn-note::after {
  content: "";
  position: absolute;
  top: 0; left: 8%;
  width: 84%; height: 44%;
  background: linear-gradient(180deg,
    rgba(255,255,255,.12) 0%,
    rgba(200,240,255,.04) 60%,
    transparent 100%
  );
  border-radius: 18px 18px 50% 50%;
  pointer-events: none;
}

.opt-btn-note:active {
  transform: rotateX(10deg) rotateY(-2deg) scale(0.97);
  box-shadow:
    inset 0 1px 0 rgba(0,255,255,.18),
    inset 0 -4px 12px rgba(0,0,0,.9),
    0 0 0 1px rgba(0,230,255,.5),
    0 0 20px rgba(0,200,255,.18),
    0 6px 16px rgba(0,0,0,.8);
}

.opt-btn-note:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  box-shadow: none;
}

/* Structure interne */
.opt-btn-note__inner {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 8px 14px;
}

.opt-btn-note__icon svg {
  filter: drop-shadow(0 0 4px rgba(0,220,255,.7));
}

.opt-btn-note__label {
  position: relative;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: #00eeff;
  text-shadow: 0 0 6px rgba(0,255,255,.5), 0 0 18px rgba(0,200,255,.2);
  transform: translateY(-3px);
}

.opt-btn-note__label::after {
  content: "";
  position: absolute;
  left: 5%; bottom: -4px;
  width: 90%; height: 1.5px;
  background: linear-gradient(90deg,
    transparent,
    rgba(0,230,255,.8) 40%,
    rgba(150,240,255,.9) 50%,
    rgba(0,230,255,.8) 60%,
    transparent
  );
}

.opt-btn-reset {
  width: 100%;
  flex: none;
  background: rgba(255,48,40,0.1);
  color: #ff8080;
  border: 1px solid rgba(255,48,40,0.3);
  margin-top: 8px;
}
.opt-btn-reset:hover { background: rgba(255,48,40,0.2); }

/* ── Style section ── */
.options-style-section {
  padding: 0 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.options-style-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.5);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-family: Roboto, system-ui, sans-serif;
  margin-bottom: 2px;
}

/* 4 pastilles + G/I sur une seule ligne */
.style-color-swatches {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: nowrap;
  padding: 2px 0;
  margin-bottom: 12px;
}

.style-swatch-btn {
  width: 32px;
  height: 32px;
  border-radius: 7px;
  border: 1.5px solid rgba(0, 255, 255, 0.25);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
  flex-shrink: 0;
  outline: none;
}
.style-swatch-btn:hover {
  transform: scale(1.12);
  box-shadow: 0 0 8px rgba(255,255,255,0.2);
}
.style-swatch-btn.active {
  border-color: #00ffff;
  box-shadow: 0 0 0 3px rgba(0,255,255,0.3);
  transform: scale(1.1);
}

/* Séparateur vertical */
.style-row-sep {
  display: inline-block;
  width: 1px;
  height: 26px;
  background: rgba(255,255,255,0.18);
  margin: 0 2px;
  flex-shrink: 0;
}

/* Toggles Gras / Italique (inline avec pastilles) */
.style-toggle-btn {
  width: 34px;
  height: 32px;
  border-radius: 7px;
  border: 1.5px solid rgba(0, 255, 255, 0.25);
  background: rgba(255,255,255,0.05);
  color: #dce3ee;
  font-size: 1rem;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  outline: none;
  -webkit-appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.18s, border-color 0.18s, color 0.18s;
  font-family: Roboto, system-ui, sans-serif;
  flex-shrink: 0;
}
.style-toggle-btn:hover {
  background: rgba(0,255,255,0.1);
  border-color: rgba(0,255,255,0.4);
}
.style-toggle-btn.active {
  background: rgba(0,255,255,0.18);
  border-color: #00ffff;
  color: #00ffff;
}

/* Bouton reset compact (icône seule) */

.style-reset-all-btn {
    border: 1.5px solid #00ffff;
}

.style-reset-all-btn svg {
    stroke: #00ffff;
}
.style-reset-all-btn {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  border: 1.5px solid rgba(0, 255, 255, 0.25);
  background: transparent;
  color: #888;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  outline: none;
  -webkit-appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s, border-color 0.2s;
  margin-left: auto;
  flex-shrink: 0;
}
.style-reset-all-btn:hover {
  color: #ff8080;
  border-color: rgba(255,128,128,0.4);
}

/* ── BLOC-NOTES PANEL ── */
.bloc-notes-panel {
  max-width: 480px;
  max-height: 80vh;
  min-height: 180px;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              min-height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.bn-list {
  overflow-y: auto;
  flex: 1;
  padding: 10px 0;
  min-height: 80px;
  transition: min-height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.bn-list::-webkit-scrollbar { width: 6px; }
.bn-list::-webkit-scrollbar-thumb { background: rgba(0,255,255,0.3); border-radius: 6px; }

.bn-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 3rem 2rem;
  color: rgba(255,255,255,0.35);
  font-family: Roboto, system-ui, sans-serif;
  font-size: 0.9rem;
  animation: bn-empty-in 0.45s cubic-bezier(0.4, 0, 0.2, 1) both;
}

@keyframes bn-empty-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0);   }
}

.bn-item {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  transition: background 0.2s, transform 0.12s ease;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
.bn-item:hover { background: rgba(0,255,255,0.04); }
.bn-item--pressing {
  transform: scale(0.985);
  background: rgba(0,255,255,0.06);
}
.bn-item--armed {
  background: rgba(0,255,255,0.12);
  box-shadow: inset 0 0 0 1px rgba(0,255,255,0.4);
}

#bnShareToast {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.88);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  min-width: 190px;
  max-width: 78vw;
  padding: 26px 30px;
  background: rgba(12,16,33,0.97);
  color: #eaf6ff;
  border: 1.5px solid rgba(0,255,255,0.55);
  border-radius: 18px;
  font-size: 1.1rem;
  font-weight: 600;
  font-family: Roboto, system-ui, sans-serif;
  text-align: center;
  box-shadow: 0 0 0 1px rgba(0,255,255,0.15),
              0 14px 44px rgba(0,0,0,0.6),
              0 0 38px rgba(0,255,255,0.25);
  z-index: 100000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease,
              transform 0.26s cubic-bezier(0.34, 1.56, 0.64, 1);
}
#bnShareToast.bn-toast--show {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

#bnShareToast .bn-toast-check {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  color: #00ffff;
  background: rgba(0,255,255,0.10);
  border: 2px solid rgba(0,255,255,0.5);
  box-shadow: 0 0 20px rgba(0,255,255,0.4);
}
#bnShareToast .bn-toast-check svg { width: 32px; height: 32px; }

/* Tracé animé du ✓ (style cohérent avec tes autres checkmarks) */
#bnShareToast .bn-toast-check svg polyline {
  stroke-dasharray: 30;
  stroke-dashoffset: 30;
}
#bnShareToast.bn-toast--show .bn-toast-check svg polyline {
  animation: bnCheckDraw 0.4s ease 0.1s forwards;
}
@keyframes bnCheckDraw { to { stroke-dashoffset: 0; } }

#bnShareToast .bn-toast-msg { line-height: 1.35; }

.bn-item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}

.bn-item-ref {
  font-size:1.1rem;
  color: #00ffff;
  font-family: Roboto, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: 0.03em;
  flex: 1;
}

.bn-item-text {
  font-size: 1.2rem;
  color: #dce3ee;
  font-family: Roboto, system-ui, sans-serif;
  line-height: 1.5;
  font-style: italic;
}

.bn-item-date {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  margin-top: 6px;
  font-size: 0.80rem;
  font-family: Roboto, system-ui, sans-serif;
  font-style: normal;
  font-weight: 500;
  color: rgba(0, 255, 255, 0.6);
  letter-spacing: 0.04em;
}

.bn-item-date::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 1px;
  background: rgba(0, 255, 255, 0.2);
  margin-right: 2px;
}

.bn-item-actions {
  display: flex;
  gap: 15px;
  flex-shrink: 0;
}

.bn-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 7px;
  border: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  outline: none;
  -webkit-appearance: none;
  transition: all 0.2s;
}

.bn-btn-goto {
  background: rgba(0,255,255,0.1);
  color: #00ffff;
  border: 1px solid rgba(0,255,255,0.3);
}
.bn-btn-goto:hover { background: rgba(0,255,255,0.22); }

.bn-btn-delete {
  background: rgba(255,48,40,0.1);
  color: #ff8080;
  border: 1px solid rgba(255,48,40,0.3);
}
.bn-btn-delete:hover { background: rgba(255,48,40,0.22); }

/* Icône SVG agrandie à l'intérieur des boutons bloc-notes (le bouton reste 40×40).
   Le CSS prime sur les attributs width/height="18" du SVG. */
.bn-btn svg {
  width: 26px;
  height: 26px;
}

/* ── Bouton TTS dans OPTIONS ── */
.opt-btn-tts {
  width: 100%;
  flex: none;
  background: #000000;
  color: #c8a96e;
  border: 1px solid #ffd310;
}
.opt-btn-tts:hover { background: #000000; }

/* ── Bouton Bloc-Notes dans l'options-panel (modale verset) ── */
.opt-blocnotes-wrapper {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0 16px;
}

/* opt-blocnotes-wrapper */

/* ── Plasma Switch ── */
.plasma-switch {
  position: relative;
  width: 32px;
  height: 70px;
  cursor: pointer;
  -webkit-appearance: none;
  display: inline-block;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  flex-shrink: 0;
  outline: none;
}
.plasma-switch .plasma-input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
  -webkit-appearance: none;
  z-index: 2;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}
.plasma-switch .ambient-bloom {
  position: absolute;
  inset: -10px;
  border-radius: 50px;
  filter: blur(20px);
  opacity: 0;
  pointer-events: none;
}
.plasma-switch .plasma-fluid {
  position: absolute;
  top: 5px;
  left: 5px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #1a1a24;
  filter: blur(4px);
  transition: all .6s cubic-bezier(.34,1.56,.64,1);
  pointer-events: none;
}
.plasma-switch .glass-trench {
  position: absolute;
  inset: 0;
  border-radius: 32px;
  background: #14364d;
  backdrop-filter: blur(12px) saturate(150%);
  box-shadow:
    inset 0 3px 8px rgba(0,0,0,.8),
    inset 0 -1px 3px rgba(255,255,255,.02),
    0 1px 1px rgba(255,255,255,.05);
  border: 2px solid #0e7e74;
  pointer-events: none;
}
.plasma-switch .titanium-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(145deg, #2b2e38, #15161b);
  box-shadow:
    0 4px 8px rgba(0,0,0,.6),
    inset 0 1px 1px rgba(255,255,255,.15),
    inset 0 -1px 2px rgba(0,0,0,.5),
    0 0 0 1px rgba(255,255,255,.05);
  transition: transform .6s cubic-bezier(.34,1.56,.64,1);
  display: flex;
  align-items: center;
  justify-content: center;
}
.plasma-switch .indicator-line {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #00F0FF;
  transition: background .5s ease, box-shadow .5s ease;
}

.plasma-switch .plasma-input:checked ~ .plasma-fluid {
  transform: translateY(38px);
  height: 27px;
  border-radius: 15px;
}
.plasma-switch .plasma-input:checked ~ .glass-trench .titanium-thumb {
  transform: translateY(38px);
}
.plasma-switch .plasma-input:checked ~ .glass-trench .indicator-line {
  background: #fb0804;
  box-shadow: 0 0 6px #00F0FF;
}

/* ── Plasma Switch : version HORIZONTALE ──
   Uniquement les 2 switchs du bloc .search-close-row (quickNavPanel).
   Le switch vertical du .options-panel n'a pas ces IDs : il reste vertical. */
#verseModalSwitch.plasma-switch,
#navPanelSwitch.plasma-switch {
  width: 70px;
  height: 32px;
}
/* Repos : pastille à gauche (inchangé : top/left identiques) */
/* Coché : déplacement horizontal au lieu de vertical */
#verseModalSwitch.plasma-switch .plasma-input:checked ~ .plasma-fluid,
#navPanelSwitch.plasma-switch .plasma-input:checked ~ .plasma-fluid {
  transform: translateX(38px);
  width: 27px;
  height: 22px;
  border-radius: 15px;
}
#verseModalSwitch.plasma-switch .plasma-input:checked ~ .glass-trench .titanium-thumb,
#navPanelSwitch.plasma-switch .plasma-input:checked ~ .glass-trench .titanium-thumb {
  transform: translateX(38px);
}

.opt-btn-blocnotes {
  width: 100%;
  flex: none;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  background: rgba(0, 255, 255, 0.08);
  color: #00ffff;
  border: 1.5px solid rgba(0, 255, 255, 0.4);
  border-radius: 14px;
  cursor: pointer;
  -webkit-appearance: none;
  transition: background 0.22s;
  font-family: Roboto, system-ui, sans-serif;
  box-sizing: border-box;
  margin: 0;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}
.opt-btn-blocnotes:active { background: rgba(0,255,255,0.18); }
/* 3 elements evenly distributed */
.opt-btn-blocnotes-top {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  width: 100%;
  gap: 0;
}

/* Animation bounce latéral sur la flèche Bloc-Notes */
@keyframes bn-arrow-bounce {
  0%   { transform: translateX(0);     }
  20%  { transform: translateX(10px);  }
  40%  { transform: translateX(-4px);  }
  60%  { transform: translateX(7px);   }
  80%  { transform: translateX(-2px);  }
  100% { transform: translateX(0);     }
}
.bn-arrow-bounce {
  animation: bn-arrow-bounce 0.55s cubic-bezier(.36,.07,.19,.97) forwards;
}

.opt-btn-blocnotes .bn-counter {
  background: #00ffff;
  color: #000;
  font-size: 0.70rem;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  margin-left: 2px;
}

/* ── Bouton TTS chapitre dans le panneau nav ── */
/* ── Groupe boutons TTS chapitre + choix versets ── */
.tts-chapter-btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
}

.tts-chapter-nav-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0.72rem 1rem;
  background: #000000;
  color: #d4bf7f;
  border: 1px solid #ffd310;
  border-radius: 8px;
  font-size: 0.93rem;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  outline: none;
  -webkit-appearance: none;
  transition: all 0.25s;
  font-family: Roboto, system-ui, sans-serif;
  margin-bottom: 0;
}
.tts-chapter-nav-btn:hover {
  background: #000000;
  border-color: #d4bf7f;
  box-shadow: 0 0 10px rgba(212, 191, 127, 0.3);
}

.tts-verse-picker-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0.72rem 1rem;
  background: #000000;
  color: #9e8e6a;
  border: 1px solid #ffd310;
  border-radius: 8px;
  font-size: 0.93rem;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  outline: none;
  -webkit-appearance: none;
  transition: all 0.25s;
  font-family: Roboto, system-ui, sans-serif;
}
.tts-verse-picker-btn:hover {
  background: #000000;
  border-color: #9e8e6a;
  box-shadow: 0 0 10px rgba(158, 142, 106, 0.25);
}

/* Bouton "Livre entier" — pleine largeur sur sa propre ligne */
.tts-book-nav-btn {
  flex: 1 1 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0.72rem 1rem;
  background: #000000;
  color: #c08bd6;
  border: 1px solid #c08bd6;
  border-radius: 8px;
  font-size: 0.93rem;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  outline: none;
  -webkit-appearance: none;
  box-shadow: 0 0 10px rgba(192, 139, 214, 0.3);
  transition: all 0.25s;
  font-family: Roboto, system-ui, sans-serif;
}
.tts-book-nav-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
}

/* Ligne de progression dans la synthèse vocale (lecture d'un livre) */
.tts-progress {
  padding: 4px 16px 0 16px;
  font-size: 0.8rem;
  color: #c08bd6;
  font-family: Roboto, system-ui, sans-serif;
  text-align: center;
  letter-spacing: 0.02em;
}

/* ══ MODAL CHOIX VERSET(S) ══ */
.verse-picker-panel {
  max-width: 400px;
  display: flex;
  flex-direction: column;
  max-height: 85vh;
}

.vp-ref {
  padding: 8px 16px 6px 16px;
  font-size: 1rem;
  color: #000000;
  font-weight:blod;
  background: #1A8C96; 
  font-family: Roboto, system-ui, sans-serif;
  letter-spacing: 0.03em;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  flex-shrink: 0;
}

.vp-actions-top {
  display: flex;
  gap: 8px;
  padding: 10px 16px 8px;
  flex-shrink: 0;
}

.vp-action-btn {
  flex: 1;
  padding: 6px 10px;
  background: #000000;
  color: #d4bf7f;
  border: 1.5px solid rgba(212, 191, 127, 0.45);
  border-radius: 6px;
  font-size: 0.78rem;
  font-family: Roboto, system-ui, sans-serif;
  cursor: pointer;
  transition: background 0.2s;
}
.vp-action-btn:hover {
  background: #000000;
}

.vp-verse-list {
  flex: 1;
  overflow-y: auto;
  padding: 4px 12px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.vp-verse-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 7px;
  cursor: pointer;
  transition: background 0.15s;
  border: 1px solid transparent;
}
.vp-verse-item:hover {
  background: rgba(212,191,127,0.06);
  border-color: rgba(212,191,127,0.12);
}
.vp-verse-item:has(.vp-checkbox:checked) {
  background: rgba(212,191,127,0.1);
  border-color: rgba(212,191,127,0.25);
}

.vp-checkbox {
  flex-shrink: 0;
  width: 17px;
  height: 17px;
  margin-top: 2px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  background-color: rgba(255,255,255,0.07);
  border: 1px solid rgba(212,191,127,0.35);
  border-radius: 4px;
  position: relative;
  transition: background-color 0.15s, border-color 0.15s;
}
.vp-checkbox:checked {
  background-color: #00ff00;
  border-color: #00ff00;
}
.vp-checkbox:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 4px;
  height: 9px;
  border: solid #14140f;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.vp-verse-num {
  flex-shrink: 0;
  min-width: 24px;
  font-size: 0.85rem;
  font-weight: 700;
  color: #d4bf7f;
  font-family: Roboto, system-ui, sans-serif;
  line-height: 1.4;
}

.vp-verse-text {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.75);
  line-height: 1.5;
  font-family: Roboto, system-ui, sans-serif;
}

.vp-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-top: 1px solid rgba(255,255,255,0.08);
  flex-shrink: 0;
  gap: 12px;
}

.vp-count {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.4);
  font-family: Roboto, system-ui, sans-serif;
  transition: color 0.15s;
}
.vp-count.vp-count--active {
  color: #00ff00;
}

.vp-listen-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 20px;
  background: linear-gradient(135deg, #3a3220 0%, #2b2217 100%);
  color: #d4bf7f;
  border: 1.5px solid rgba(212,191,127,0.45);
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 700;
  font-family: Roboto, system-ui, sans-serif;
  cursor: pointer;
  transition: all 0.25s;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}
.vp-listen-btn:not(:disabled):hover {
  background: linear-gradient(135deg, #4a4028 0%, #3a2f1e 100%);
  border-color: #d4bf7f;
  box-shadow: 0 0 12px rgba(212,191,127,0.3);
}
.vp-listen-btn:disabled {
  opacity: 0.38;
  cursor: not-allowed;
}

/* ── Scrollbar de la liste de versets : pilule dorée assortie au thème
   or/crème (#d4bf7f) de cette modale. Pilule détachée du rail de 2px via
   border transparent + background-clip:padding-box, qui s'éclaircit au survol. */
.vp-verse-list::-webkit-scrollbar {
  width: 10px;
}
.vp-verse-list::-webkit-scrollbar-track {
  background: rgba(212,191,127,0.05);
  border-radius: 10px;
  margin: 6px 2px;
}
.vp-verse-list::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(212,191,127,0.62) 0%, rgba(212,191,127,0.30) 100%);
  border-radius: 10px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.vp-verse-list::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(212,191,127,0.9) 0%, rgba(212,191,127,0.55) 100%);
  background-clip: padding-box;
}

/* ── Textes agrandis dans la fenêtre de sélection de versets ──
   (l'en-tête .cmp-title n'est pas touché). Préfixe .verse-picker-panel
   pour une spécificité suffisante sans !important. */
.verse-picker-panel .vp-ref        { font-size: 1rem; }
.verse-picker-panel .vp-action-btn { font-size: 0.95rem; }
.verse-picker-panel .vp-verse-num  { font-size: 1.05rem; }
.verse-picker-panel .vp-verse-text { font-size: 1.05rem; }
.verse-picker-panel .vp-count      { font-size: 0.95rem; }
.verse-picker-panel .vp-listen-btn { font-size: 1.05rem; }



/* ══ MODAL SYNTHÈSE VOCALE ══ */
.tts-panel {
  max-width: 380px;
}

.tts-ref {
  padding: 6px 16px 6px 16px;
  font-size: 1.3rem;
  font-weight:500;
  color: 	#000000;
  background: #1A8C96; 
  font-family: Roboto, system-ui, sans-serif;
  letter-spacing: 0.03em;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  flex-shrink: 0;
}

.tts-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 16px 10px 16px;
  flex-shrink: 0;
}

.tts-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.tts-label {
  font-size: 1rem;
  color: rgba(255,255,255,0.55);
  font-family: Roboto, system-ui, sans-serif;
  min-width: 90px;
  flex-shrink: 0;
  letter-spacing: 0.02em;
}

.tts-select {
  flex: 1;
  background: rgba(255,255,255,0.05);
  color: #e0e0e0;
  border: 1.5px solid rgba(0,255,255,0.25);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 0.82rem;
  font-family: Roboto, system-ui, sans-serif;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  outline: none;
  -webkit-appearance: none;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: border-color 0.2s;
}
.tts-select:focus { outline: none; border-color: rgba(0,255,255,0.6); }

/* ── Sliders ── */
.tts-range {
  flex: 1;
  height: 4px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  background: rgba(255,255,255,0.12);
  border-radius: 4px;
  accent-color: #00ffff;
}
/* Thumb – WebKit / Blink */
.tts-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #00ffff;
  box-shadow: 0 0 6px rgba(0,255,255,0.55);
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}
.tts-range::-webkit-slider-thumb:active {
  transform: scale(1.25);
  box-shadow: 0 0 10px rgba(0,255,255,0.8);
}
/* Track fill – WebKit */
.tts-range::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 4px;
  background: transparent;
}
/* Thumb – Firefox */
.tts-range::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border: none;
  border-radius: 50%;
  background: #00ffff;
  box-shadow: 0 0 6px rgba(0,255,255,0.55);
  cursor: pointer;
}
.tts-range::-moz-range-track {
  height: 4px;
  border-radius: 4px;
  background: rgba(255,255,255,0.12);
}
.tts-range:focus { outline: none; }

.tts-controls {
  display: flex;
  justify-content: center;
  gap: 12px;
  padding: 10px 16px 6px 16px;
  flex-shrink: 0;
}

.tts-btn {
  font-family: -apple-system, BlinkMacSystemFont;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(145deg, #2a2a2d, #1a1a1c);
  box-shadow:
    inset 0 2px 4px rgba(255,255,255,0.05),
    inset 0 -4px 6px rgba(0,0,0,0.6);
  /* overflow:hidden retiré — il bloquait transform:scale sur Android/WebKit */
  border: none;
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
  transition: transform 0.15s ease, filter 0.15s ease;
  will-change: transform;
  -webkit-transform: translateZ(0); /* active le GPU sur Android */
  transform: translateZ(0);
}
.tts-btn:focus,
.tts-btn:focus-visible {
  outline: none;
}
.tts-btn:active {
  -webkit-transform: scale(0.92);
  transform: scale(0.92);
  filter: brightness(1.2);
}
.tts-btn .icon {
  width: 34px;
  height: 34px;
  z-index: 2;
}
.tts-btn .ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2.5px solid currentColor;
  opacity: 0.25;
}

.tts-btn-play  { color: #30d158; }
.tts-btn-pause { color: #ffd60a; }
.tts-btn-stop  { color: #ff453a; }

.tts-btn-play:hover  { filter: brightness(1.15); }
.tts-btn-pause:hover { filter: brightness(1.15); }
.tts-btn-stop:hover  { filter: brightness(1.15); }

.tts-status {
  text-align: center;
  font-size: 1rem;
  color: greenyellow;
  font-family: Roboto, system-ui, sans-serif;
  padding: 4px 16px 14px 16px;
  flex-shrink: 0;
}

/* ── Bouton Bloc-Notes dans le panneau nav ── */
.bloc-notes-nav-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0.45rem 0.8rem;
  background: rgba(0,255,255,0.08);
  color: #00ffff;
  border: 1.5px solid rgba(0,255,255,0.4);
  border-radius: 8px;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  outline: none;
  -webkit-appearance: none;
  transition: all 0.25s;
  font-family: Roboto, system-ui, sans-serif;
  margin-top: 0;
  margin-bottom: 0;
  letter-spacing: 2px;
}

/* Bouton Bloc-Notes du quickNavPanel : éléments répartis comme dans la modale 1 */
.quick-nav-panel .bloc-notes-nav-btn {
  justify-content: space-around;
  font-size: 1.1rem;
}

/* Badge compteur du Bloc-Notes */
.bn-counter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  background: #00ffff;
  color: #000000;
  border-radius: 10px;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  margin-left: 2px;
}


/* Header sticky */
.verse-modal-header {
  position: sticky;
  top: 0;
  z-index: 900;
  background: #0c1021;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 10px 18px 10px 18px;
  border-bottom: 1px solid rgba(0, 255, 255, 0.2);
  flex-shrink: 0;
}

/* Ligne du haut : titre bold + actions */
.verse-modal-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
}

/* Ligne du bas : référence seule */
.verse-modal-header-bottom {
  display: flex;
  align-items: center;
  padding-top: 3px;
}

/* Le titre prend tout l'espace disponible à gauche */
.verse-modal-title {
  display: contents; /* les enfants (b + span) remontent dans le flux flex parent */
}

/* Actions groupées à droite : bouton note + close */
.verse-modal-header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

/* Variante scroll-top : bouton-icône carré, même esprit carte */
.btn-texte-chapitre--scroll-top {
  padding: 5px 7px;
  border-color: rgba(11, 158, 158, 0.40);
  background: linear-gradient(135deg, rgba(11,158,158,0.10) 0%, rgba(11,120,120,0.05) 100%);
  box-shadow: 0 2px 10px rgba(11,158,158,0.10), inset 0 1px 0 rgba(255,255,255,0.06);
  border-radius: 10px;
  /* SVG direct : forcer les dimensions et supprimer overflow:hidden hérité */
  overflow: visible;
  width: 70px;
  height: 44px;
  flex-shrink: 0;
}
.btn-texte-chapitre--scroll-top:hover {
  background: linear-gradient(135deg, rgba(11,158,158,0.22) 0%, rgba(11,120,120,0.12) 100%);
  border-color: rgba(11,158,158,0.70);
  box-shadow: 0 3px 16px rgba(11,158,158,0.25), inset 0 1px 0 rgba(255,255,255,0.10);
  transform: translateY(-1px);
}

.verse-modal-title b {
  color: #00ffff;
  font-weight: bold;
  font-size: 1.15em;
  font-family: Roboto, system-ui, sans-serif;
}

.verse-modal-ref {
  color: #00ff00;
  font-size: 1rem;
  font-family: Roboto, system-ui, sans-serif;
  letter-spacing: 0.04em;
}

/* Titre « Note de section ou de chapitre » réparti sur 3 lignes :
   garde une largeur étroite pour laisser les 3 boutons sur la même rangée. */
.verse-modal-texte-title {
  flex-shrink: 0;
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.62);
  font-family: Roboto, system-ui, sans-serif;
}

.verse-modal-label {
  display: block;
  color: rgba(0,255,255,0.5);
  font-size: 0.65rem;
  font-family: Roboto, system-ui, sans-serif;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 2px;
}

.verse-modal-close {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  outline: none;
  -webkit-appearance: none;
  flex-shrink: 0;
}

/* Zone scrollable unique (versebox + note) */
.verse-modal-scroll {
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  scroll-behavior: smooth;
}
.verse-modal-scroll::-webkit-scrollbar { width: 6px; }
.verse-modal-scroll::-webkit-scrollbar-track { background: rgba(0,255,255,0.05); border-radius: 6px; }
.verse-modal-scroll::-webkit-scrollbar-thumb { background: rgba(0,255,255,0.3); border-radius: 6px; }
.verse-modal-scroll::-webkit-scrollbar-thumb:hover { background: rgba(0,255,255,0.55); }

/* Verset — premier élément dans la zone scrollable */
.verse-modal-versebox {
  position: relative;
  background: rgba(0, 255, 255, 0.06);
  border-left: 3px solid #00ffff;
  padding: 10px 16px;
  margin: 14px 18px 24px 18px;
  border-radius: 0 6px 6px 0;
  font-size: 1.2rem;
  line-height: 1.6;
  color: #fff;
  flex-shrink: 0;
}
/* Séparateur "design" verset / notes : trait gris dégradé, effilé aux extrémités + légère lueur */
.verse-modal-versebox::after {
  content: "";
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: -13px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg,
      rgba(111, 136, 184, 0) 0%,
      rgba(111, 136, 184, 0.9) 50%,
      rgba(111, 136, 184, 0) 100%);
  box-shadow: 0 0 6px rgba(122, 180, 255, 0.45);
}
.verse-modal-num { color: #00ffff; font-weight: 700; font-size: 1.2rem; margin-right: 6px; }
.verse-modal-versetext { color: #ffffff; }

/* Note — second élément dans la zone scrollable */
.verse-modal-body {
  padding: 16px 18px 28px 18px;
  font-family: Roboto, system-ui, sans-serif;
  font-size: 1.20rem;
  line-height: 1.75;
  color: #dce3ee;
}

/* Styles du contenu issu de descriptif.html */
.verse-modal-body dfn {
  font-style: italic;
  font-weight: bold;
  color: #fc9a46;
}

.verse-modal-body cite {
  font-style: italic;
}

.verse-modal-body strong {
  font-weight: bold;
  color: #ffffff;
}

.verse-modal-body em {
  font-style: italic;
}

.verse-modal-body code {
  font-weight: bold;
  font-family: Roboto, system-ui, sans-serif;
  font-size: 0.82em;
  background-color: #FFF168;
  color: #000;
  padding: 1px 5px;
  margin: 0 2px;
  border-radius: 2px;
}

.verse-modal-body b {
  color: #00ffff;
  font-weight: bold;
  font-size: 1.05em;
}

/* ── Note de section (note-section) ── */
.verse-modal-body .note-section {
  background: linear-gradient(135deg, #0d1b2a 0%, #0a1520 100%);
  color: #cdd9e8;
  padding: 18px 20px;
  margin-bottom: 12px;
  border-radius: 10px;
  border: 5px solid rgba(0, 255, 255, 0.18);
  list-style: none;
  max-height: 55vh;
  overflow-y: auto;
  scroll-behavior: smooth;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(0, 255, 255, 0.06);
}
.verse-modal-body .note-section::-webkit-scrollbar { width: 6px; }
.verse-modal-body .note-section::-webkit-scrollbar-track { background: rgba(0, 255, 255, 0.04); border-radius: 6px; }
.verse-modal-body .note-section::-webkit-scrollbar-thumb { background: rgba(0, 255, 255, 0.3); border-radius: 6px; }
.verse-modal-body .note-section::-webkit-scrollbar-thumb:hover { background: rgba(0, 255, 255, 0.55); }

.verse-modal-body .note-section-sous-titre {
  background: rgba(139, 111, 71, 0.25);
  color: #c8a96e;
  border: 1px solid rgba(139, 111, 71, 0.4);
  padding: 3px 10px;
  border-radius: 4px;
  font-size: 0.85em;
  letter-spacing: 0.04em;
}

/* Titres forts dans note-section */
.verse-modal-body .note-section > strong,
.verse-modal-body .note-section strong:first-child {
  display: block;
  color: #00ffff;
  font-size: 1.02em;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(0, 255, 255, 0.15);
  letter-spacing: 0.02em;
}

.verse-modal-body ul {
  list-style: none;
  padding: 0;
}

.verse-modal-body ul ul {
  padding-left: 1.4em;
  margin-top: 6px;
}

.verse-modal-body ul ul li {
  position: relative;
  padding: 3px 0 3px 0.5em;
  color: #b8c8d8;
}

.verse-modal-body ul ul li::before {
  content: "›";
  position: absolute;
  left: -0.8em;
  color: #00ffff;
  font-weight: bold;
  opacity: 0.7;
}

/* Variante texte (note de chapitre) — conteneur scrollable explicite */
.verse-modal-texte {
  padding-top: 12px;
  overflow-y: auto;
  flex: 1;
  scroll-behavior: smooth;
}
.verse-modal-texte::-webkit-scrollbar { width: 6px; }
.verse-modal-texte::-webkit-scrollbar-track { background: rgba(0,255,255,0.04); border-radius: 6px; }
.verse-modal-texte::-webkit-scrollbar-thumb { background: rgba(0,255,255,0.3); border-radius: 6px; }
.verse-modal-texte::-webkit-scrollbar-thumb:hover { background: rgba(0,255,255,0.55); }

/* ══════════════════════════════════════════
   TABLES RESPONSIVES — style harmonisé
   ══════════════════════════════════════════ */

.verse-modal-body table {
  width: 100%;
  max-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 14px 0 18px 0;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(0, 255, 255, 0.2);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0, 255, 255, 0.05);
  font-size: 0.84rem;
  color: #cdd9e8;
  display: table;
  table-layout: fixed;
  box-sizing: border-box;
}

/* En-têtes */
.verse-modal-body table th {
  background: linear-gradient(135deg, rgba(0,255,255,0.14) 0%, rgba(0,180,180,0.1) 100%);
  color: #00ffff;
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 8px 6px;
  text-align: center;
  border-bottom: 2px solid rgba(0, 255, 255, 0.35);
  white-space: normal;
  word-break: break-word;
  line-height: 1.3;
}

/* Première colonne (labels) */
.verse-modal-body table td:first-child {
  color: #cdd9e8;
  font-weight: 600;
  background: rgba(139, 111, 71, 0.08);
  border-right: 1px solid rgba(139, 111, 71, 0.2);
  white-space: normal;
  word-break: break-word;
  padding: 8px 6px;
  line-height: 1.35;
}

/* Cellules normales */
.verse-modal-body table td {
  padding: 8px 6px;
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  transition: background 0.15s ease;
  color: #cdd9e8;
  white-space: normal;
  word-break: break-word;
  line-height: 1.35;
}

/* Cellule vide (coin supérieur gauche) */
.verse-modal-body table td:empty,
.verse-modal-body table th:empty {
  background: #080e18;
}

/* Lignes alternées */
.verse-modal-body table tr:nth-child(even) td {
  background: rgba(0, 255, 255, 0.03);
}
.verse-modal-body table tr:nth-child(even) td:first-child {
  background: rgba(139, 111, 71, 0.12);
}

/* Hover sur les lignes */
.verse-modal-body table tr:hover td {
  background: rgba(0, 255, 255, 0.07);
}
.verse-modal-body table tr:hover td:first-child {
  background: rgba(139, 111, 71, 0.18);
}

/* Dernière ligne : pas de bordure basse */
.verse-modal-body table tr:last-child td {
  border-bottom: none;
}

/* Valeurs em/strong dans les cellules */
.verse-modal-body table em {
  color: #a0c4d8;
  font-style: italic;
}
.verse-modal-body table strong,
.verse-modal-body table b {
  color: #e8d8b0;
  font-weight: 700;
  font-size: inherit;
}

/* Scrollbar de la table sur mobile */
.verse-modal-body table::-webkit-scrollbar { height: 5px; }
.verse-modal-body table::-webkit-scrollbar-track { background: rgba(0,255,255,0.05); border-radius: 4px; }
.verse-modal-body table::-webkit-scrollbar-thumb { background: rgba(0,255,255,0.3); border-radius: 4px; }

/* ── Ligne de groupe (OR / ARGENT) dans table verticale ── */
.verse-modal-body table .table-group-header td {
  background: linear-gradient(90deg, rgba(0,255,255,0.18) 0%, rgba(0,255,255,0.06) 100%);
  color: #00ffff;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 7px 14px;
  border-top: 1px solid rgba(0,255,255,0.3);
  border-bottom: 1px solid rgba(0,255,255,0.15);
  text-align: left;
}
/* Pas de style "première colonne" sur les lignes de groupe */
.verse-modal-body table .table-group-header td:first-child {
  background: linear-gradient(90deg, rgba(0,255,255,0.18) 0%, rgba(0,255,255,0.06) 100%);
  color: #00ffff;
  border-right: none;
  font-weight: 700;
}

/* ── Ligne de conversion franc/euro au-dessus de la table ── */
.verse-modal-body .monnaie-equiv {
  display: block;
  margin-bottom: 6px;
  font-size: 0.82rem;
  color: rgba(200, 169, 110, 0.85);
  letter-spacing: 0.02em;
}
.verse-modal-body .monnaie-equiv small {
  color: rgba(255,255,255,0.35);
  font-size: 0.78em;
}


/* ============================================
   ZOOM - Contrôle de taille du texte
   ============================================ */

.zoom-control {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 0;
  margin-bottom: 0;
  padding: 0.75rem;
  background: rgba(0, 255, 255, 0.05);
  border: 1px solid rgba(0, 255, 255, 0.2);
  border-radius: 10px;
}

.zoom-buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  border: 1.5px solid rgba(0, 255, 255, 0.4);
  border-radius: 8px;
  overflow: hidden;
}

.zoom-btn {
  flex: 1;
  background: transparent;
  border: none;
  color: #00ffff;
  font-size: 1rem;
  font-weight: 700;
  font-family: Roboto, system-ui, sans-serif;
  padding: 0.55rem 0.8rem;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  outline: none;
  -webkit-appearance: none;
  transition: background 0.2s ease, color 0.2s ease;
  letter-spacing: 0.02em;
}

.zoom-btn:hover {
  background: rgba(0, 255, 255, 0.15);
}

.zoom-btn:active {
  background: rgba(0, 255, 255, 0.3);
}

.zoom-level {
  flex: 1;
  text-align: center;
  color: #ffffff;
  font-size: 0.9rem;
  font-family: Roboto, system-ui, sans-serif;
  font-weight: 600;
  border-left: 1px solid rgba(0, 255, 255, 0.3);
  border-right: 1px solid rgba(0, 255, 255, 0.3);
  padding: 0.55rem 0;
  background: rgba(0,0,0,0.2);
  min-width: 52px;
}


/* Surbrillance temporaire du verset ciblé depuis le Bloc-Notes */
.verse--highlight-goto {
  animation: verseGotoFlash 2s ease-out forwards;
  opacity: 1 !important;
  transform: translateY(0) !important;
}

.verse--highlight-done {
  animation: none !important;
  opacity: 1 !important;
  transform: translateY(0) !important;
}

@keyframes verseGotoFlash {
  0%   { background-color: rgba(0, 255, 255, 0.25); border-radius: 6px; }
  60%  { background-color: rgba(0, 255, 255, 0.15); border-radius: 6px; }
  100% { background-color: transparent; }
}

/* ══════════════════════════════════════════
   TOUTES LES TABLES — Responsive smartphone
   Optimisé Samsung Galaxy A15 (360 × 800 dp)
   ══════════════════════════════════════════ */

/* Wrapper responsive pour TOUTES les tables */
.verse-modal-body table {
  display: table;
  width: 100%;
  max-width: 100%;
  table-layout: fixed;
  box-sizing: border-box;
}

/* TABLE-MONNAIES — 3 colonnes spécifiques */
.verse-modal-body .table-monnaies {
  font-size: 0.80rem;
}

/* Largeurs des 3 colonnes : Unité | Poids | Valeur */
.verse-modal-body .table-monnaies th:nth-child(1),
.verse-modal-body .table-monnaies td:nth-child(1) { width: 40%; }

.verse-modal-body .table-monnaies th:nth-child(2),
.verse-modal-body .table-monnaies td:nth-child(2) { width: 30%; }

.verse-modal-body .table-monnaies th:nth-child(3),
.verse-modal-body .table-monnaies td:nth-child(3) { width: 30%; }

/* En-têtes table-monnaies */
.verse-modal-body .table-monnaies th {
  padding: 8px 5px;
  font-size: 0.70rem;
  letter-spacing: 0.04em;
  white-space: normal;
  word-break: break-word;
  text-align: center;
}

/* Cellules table-monnaies */
.verse-modal-body .table-monnaies td {
  padding: 7px 5px;
  text-align: center;
  white-space: normal;
  word-break: break-word;
  hyphens: auto;
  line-height: 1.35;
  color: #cdd9e8;
}

/* Colonne Unité (1ère) : alignée à gauche */
.verse-modal-body .table-monnaies td:first-child {
  text-align: left;
  padding-left: 7px;
  white-space: normal;
  font-size: 0.79rem;
  color: #cdd9e8;
}

/* "(50 sicles)" sur une ligne séparée */
.verse-modal-body .table-monnaies td:first-child small {
  display: block;
  font-size: 0.67rem;
  opacity: 0.75;
  margin-top: 1px;
  color: #cdd9e8;
}

/* Lignes de groupe OR / ARGENT */
.verse-modal-body .table-monnaies .table-group-header td {
  text-align: left;
  padding: 6px 7px;
  font-size: 0.70rem;
  letter-spacing: 0.10em;
}

/* Ligne equiv franc/euro */
.verse-modal-body .monnaie-equiv {
  font-size: 0.75rem;
  line-height: 1.5;
  word-break: break-word;
}

/* ── Galaxy A15 portrait (≤ 390px) ── */
@media (max-width: 390px) {
  .verse-modal-body table {
    font-size: 0.80rem;
  }
  .verse-modal-body table th {
    font-size: 0.70rem;
    padding: 7px 4px;
    letter-spacing: 0.03em;
  }
  .verse-modal-body table td {
    padding: 7px 4px;
    font-size: 0.80rem;
    color: #cdd9e8;
  }
  .verse-modal-body table td:first-child {
    padding-left: 5px;
    font-size: 0.80rem;
    color: #cdd9e8;
  }
  .verse-modal-body .table-monnaies {
    font-size: 0.76rem;
  }
  .verse-modal-body .table-monnaies th {
    font-size: 0.66rem;
    padding: 7px 3px;
  }
  .verse-modal-body .table-monnaies td {
    padding: 6px 3px;
    font-size: 0.76rem;
    color: #cdd9e8;
  }
  .verse-modal-body .table-monnaies td:first-child {
    padding-left: 5px;
    font-size: 0.75rem;
    color: #cdd9e8;
  }
}


/* ============================================
   WELCOME SCREEN — Menu de navigation
   ============================================ */

.welcome-menu {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    margin: 0;
    text-align: left;
}

.welcome-menu-btn {
    display: block;
    width: 100%;
    padding: 7px 14px;
    background: rgba(255,255,255,0.06);
    color: #ffffff;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 8px;
    font-size: 0.88rem;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    outline: none;
    -webkit-appearance: none;
    transition: background 0.18s, border-color 0.18s;
    font-family: inherit;
}

.welcome-menu-btn:hover {
    background: rgba(0,255,255,0.12);
    border-color: rgba(0,255,255,0.35);
    color: #00ffff;
}

.welcome-menu-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.welcome-menu-toggle .toggle-icon {
    transition: transform 0.28s cubic-bezier(0.4, 0.0, 0.2, 1);
    flex-shrink: 0;
}

.welcome-menu-toggle[aria-expanded="true"] .toggle-icon {
    transform: rotate(180deg);
}

.welcome-menu-group {
    display: flex;
    flex-direction: column;
}

/* Sous-menu : fermé par défaut */
.welcome-submenu {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 0;
    padding-left: 12px;
    border-left: 2px solid rgba(0,255,255,0.2);
    /* Animation douce */
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.42s cubic-bezier(0.4, 0.0, 0.2, 1),
                opacity 0.30s ease,
                margin-top 0.28s ease;
}

/* Sous-menu ouvert */
.welcome-submenu.is-open {
    max-height: 700px;
    opacity: 1;
    margin-top: 4px;
    overflow-y: auto;
}

/* Scrollbar sous-menu */
.welcome-submenu::-webkit-scrollbar { width: 4px; }
.welcome-submenu::-webkit-scrollbar-track { background: rgba(0,255,255,0.04); border-radius: 4px; }
.welcome-submenu::-webkit-scrollbar-thumb { background: rgba(0,255,255,0.2); border-radius: 4px; }
.welcome-submenu::-webkit-scrollbar-thumb:hover { background: rgba(0,255,255,0.4); }

.welcome-submenu-btn {
    display: block;
    padding: 7px 12px;
    background: rgba(255,255,255,0.04);
    color: #cccccc;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 6px;
    font-size: 0.88rem;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    outline: none;
    -webkit-appearance: none;
    transition: background 0.15s, color 0.15s;
    font-family: inherit;
}

.welcome-submenu-btn:hover {
    background: rgba(0,255,255,0.10);
    color: #00ffff;
    border-color: rgba(0,255,255,0.2);
}

.welcome-submenu-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(0,255,255,0.55);
    padding: 8px 12px 3px;
}

.navigation-hint {
    margin-top: 0;
    padding-top: 4px;
    padding-bottom: 4px;
}


/* ============================================
   MODALES SOUS-MENUS — Welcome screen
   ============================================ */

.submenu-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9000;
    align-items: flex-end;  /* panel remonte depuis le bas */
    justify-content: center;
}

.submenu-modal.is-open {
    display: flex;
}

/* Fond semi-transparent */
.submenu-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    animation: smOverlayIn 0.25s ease forwards;
}

@keyframes smOverlayIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Panneau */
.submenu-modal-panel {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 480px;
    max-height: 80vh;
    background: #111418;
    border-top: 2px solid rgba(0, 255, 255, 0.35);
    border-radius: 18px 18px 0 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: smPanelIn 0.32s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes smPanelIn {
    from { transform: translateY(100%); opacity: 0.4; }
    to   { transform: translateY(0);    opacity: 1;   }
}

/* En-tête de la modale */
.submenu-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
}

.submenu-modal-title {
    /* ← TAILLE TITRE (ex: "Introduction", "Étude") — modifiable ici ↓ */
    font-size: 1.25rem;
    font-weight: 700;
    color: #00ffff;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.submenu-modal-close {
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 50%;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    outline: none;
    -webkit-appearance: none;
    color: #ffffff;
    transition: background 0.18s;
    flex-shrink: 0;
}

.submenu-modal-close:hover {
    background: rgba(0, 255, 255, 0.15);
    border-color: rgba(0, 255, 255, 0.3);
    color: #00ffff;
}

/* Corps scrollable */
.submenu-modal-body {
    overflow-y: auto;
    padding: 10px 14px 20px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.submenu-modal-body::-webkit-scrollbar { width: 5px; }
.submenu-modal-body::-webkit-scrollbar-track { background: rgba(0,255,255,0.04); border-radius: 5px; }
.submenu-modal-body::-webkit-scrollbar-thumb { background: rgba(0,255,255,0.22); border-radius: 5px; }
.submenu-modal-body::-webkit-scrollbar-thumb:hover { background: rgba(0,255,255,0.42); }

/* Label de section */
.submenu-modal-label {
    display: block;
    /* ← TAILLE LABELS DE SECTION (ex: "Généralités", "Livres historiques") — modifiable ici ↓ */
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: rgba(0, 255, 255, 0.50);
    padding: 10px 4px 3px;
}

/* Boutons de lien */
.submenu-modal-btn {
    display: block;
    padding: 9px 14px;
    background: rgba(255,255,255,0.04);
    color: #d0d8e0;
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 8px;
    /* ← TAILLE BOUTONS LISTE (ex: "La Bible", "Josué"…) — modifiable ici ↓ */
    font-size: 1.1rem;
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    outline: none;
    -webkit-appearance: none;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    font-family: inherit;
}

.submenu-modal-btn:hover {
    background: rgba(0, 255, 255, 0.10);
    color: #00ffff;
    border-color: rgba(0, 255, 255, 0.22);
}

/* ── Animation check SVG Bloc-Notes ── */
@keyframes checkDrawCircle {
    to { stroke-dashoffset: 0; }
}
@keyframes checkDrawMark {
    to { stroke-dashoffset: 0; }
}
@keyframes checkBounce {
    0%   { transform: scale(1); }
    30%  { transform: scale(1.22); }
    55%  { transform: scale(0.93); }
    75%  { transform: scale(1.08); }
    100% { transform: scale(1); }
}
.check-svg-anim {
    display: inline-block;
    vertical-align: middle;
    margin-right: 5px;
    overflow: visible;
}
.check-svg-anim .c-circle {
    fill: none;
    stroke: #22c55e;
    stroke-width: 4;
    stroke-linecap: round;
    stroke-dasharray: 214;
    stroke-dashoffset: 214;
    transform: rotate(-90deg);
    transform-origin: 40px 40px;
    animation: checkDrawCircle 0.35s ease forwards;
}
.check-svg-anim .c-bg {
    fill: none;
    stroke: rgba(34,197,94,0.2);
    stroke-width: 4;
}
.check-svg-anim .c-mark {
    fill: none;
    stroke: #22c55e;
    stroke-width: 6;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 75;
    stroke-dashoffset: 75;
    animation: checkDrawMark 0.3s ease 0.28s forwards;
}
.check-svg-anim {
    animation: checkBounce 0.45s ease 0.58s both;
}

/* ── Compteur SVG animé Bloc-Notes ── */
.bn-counter-svg {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-left: 4px;
}
.bn-counter-svg svg {
  display: block;
  transform: rotate(-90deg);
}
.bn-c-bg {
  fill: rgba(255,182,0,0.12);
  stroke: #e7bb3f;
  stroke-width: 1.5;
}
.bn-c-progress {
  fill: none;
  stroke: #04fb08;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 109.96; /* 2*PI*17.5 */
  stroke-dashoffset: 109.96;
  transition: stroke-dashoffset 0.05s;
}
.bn-c-number {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1);
  font-size: 1.2rem;
  font-weight: 200;
  color: #00ffff;
  line-height: 1;
  transition: transform 0.16s cubic-bezier(.34,1.56,.64,1);
  pointer-events: none;
  font-family: Roboto, system-ui, sans-serif;
}

/* ── Compteur dans #openBlocNotesBtn : SVG 36×36 plus petit → police réduite ── */
#openBlocNotesBtn .bn-c-number {
  font-size: 0.9rem;
}

/* ── Animation bounce-in shake du compteur pendant la croix erreur ── */
@keyframes bn-counter-bounce-shake {
  0%   { transform: scale(0.4) rotate(-15deg); opacity: 0; }
  30%  { transform: scale(1.35) rotate(8deg);  opacity: 1; }
  50%  { transform: scale(0.9)  rotate(-5deg); }
  65%  { transform: scale(1.12) rotate(3deg);  }
  75%  { transform: scale(0.97) rotate(-2deg); }
  85%  { transform: scale(1.04) rotate(1deg);  }
  100% { transform: scale(1)    rotate(0deg);  }
}
@keyframes bn-counter-shake-loop {
  0%,100% { transform: rotate(0deg)   translateX(0);    }
  20%      { transform: rotate(-8deg)  translateX(-3px); }
  40%      { transform: rotate(8deg)   translateX(3px);  }
  60%      { transform: rotate(-6deg)  translateX(-2px); }
  80%      { transform: rotate(6deg)   translateX(2px);  }
}
.bn-counter-error-anim {
  animation:
    bn-counter-bounce-shake 0.55s cubic-bezier(.34,1.56,.64,1) forwards,
    bn-counter-shake-loop   0.55s ease-in-out 0.55s infinite;
  transform-origin: center center;
}

/* ── Animation FLIP 3D du compteur (jouée 1 fois à chaque sauvegarde) ── */
@keyframes bn-counter-flip {
  0% {
    transform: perspective(400px) rotateY(0deg);
    animation-timing-function: ease-out;
  }
  40% {
    transform: perspective(400px) translateZ(150px) rotateY(170deg);
  }
  50% {
    transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
  }
  80% {
    transform: perspective(400px) rotateY(360deg) scale(0.95);
  }
  100% {
    transform: perspective(400px) rotateY(360deg) scale(1);
  }
}
/* Compteurs HTML (span du bouton Bloc-Notes) : flip 3D sur l'élément lui-même */
span.bn-counter-svg.bn-counter-flip-anim {
  backface-visibility: visible;
  transform-style: preserve-3d;
  animation: bn-counter-flip 2s ease;
}
/* Flip + grossissement dédié au badge intégré (SVG) : translateZ ignoré en WebView,
   donc on utilise un scale pour le faire ressortir. Termine sur la taille de repos (1.2). */
@keyframes bn-counter-flip-big {
  0% {
    transform: rotateY(0deg) scale(1.2);
    animation-timing-function: ease-out;
  }
  40% {
    transform: rotateY(170deg) scale(1.5);
  }
  50% {
    transform: rotateY(190deg) scale(1.5);
  }
  80% {
    transform: rotateY(360deg) scale(1.28);
  }
  100% {
    transform: rotateY(360deg) scale(1.2);
  }
}

/* Compteur intégré au SVG du bouton copier : badge légèrement agrandi AU REPOS (×1.2),
   centré sur lui-même (sans toucher au positionnement x/y du <svg>). */
svg.bn-counter-svg .bn-c-flip {
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(1.2);
}
/* On n'anime PAS le <svg> (positionné en x/y) mais le groupe interne .bn-c-flip,
   qui possède une vraie bounding-box → le flip pivote autour du centre réel et reste en place. */
svg.bn-counter-svg.bn-counter-flip-anim .bn-c-flip {
  backface-visibility: visible;
  transform-style: preserve-3d;
  transform-box: fill-box;
  transform-origin: center;
  animation: bn-counter-flip-big 2s ease;
}


/* ============================================
   CUSTOM SELECT — Remplacement natif Android
   Compatible Samsung Galaxy A15 / tous mobiles
   ============================================ */

/*
  .custom-select-wrapper  → conteneur principal (remplace <select>)
  .custom-select-trigger  → bouton visible (label + flèche)
  .custom-select-dropdown → liste déroulante
  .custom-select-optgroup → label de groupe
  .custom-select-option   → item cliquable
*/

.custom-select-wrapper {
  position: relative;
  width: 100%;
  font-family: Roboto, system-ui, sans-serif;
  user-select: none;
  -webkit-user-select: none;
}

/* Bouton déclencheur */
.custom-select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.8rem 0.75rem;
  background: #000000;
  color: #ffffff;
  border: 2px solid #00ffff;
  border-radius: 8px;
  font-size: 1rem;
  font-family: Roboto, system-ui, sans-serif;
  cursor: pointer;
  outline: none;
  -webkit-appearance: none;
  transition: background 0.2s ease, box-shadow 0.2s ease;
  box-sizing: border-box;
  min-height: 44px; /* touch target Android */
  -webkit-tap-highlight-color: transparent;
}

.custom-select-trigger:hover,
.custom-select-trigger:focus {
  background: #0a0a0a;
  box-shadow: 0 0 10px rgba(0, 255, 255, 0.3);
  outline: none;
}

/* Flèche SVG */
.custom-select-arrow {
  flex-shrink: 0;
  margin-left: 8px;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: #00ffff;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.25s ease;
  pointer-events: none;
}

.custom-select-wrapper.is-open .custom-select-arrow {
  transform: rotate(180deg);
}

/* Texte sélectionné dans le trigger */
.custom-select-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
  color: #ffffff;
}

.custom-select-label.placeholder {
  color: rgba(255,255,255,0.5);
}

/* Dropdown */

/* ── Overlay fermeture custom-select ── */
#custom-select-overlay {
  position: fixed;
  inset: 0;
  z-index: 99998; /* juste sous le dropdown (99999) */
  background: transparent;
  cursor: default;
}
.custom-select-dropdown {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(92vw, 440px);
  background: #07090d;
  border: 1.5px solid rgba(0,255,255,0.42);
  border-radius: 18px;
  z-index: 99999;
  overflow-y: auto;
  max-height: 74vh;
  box-shadow:
    0 28px 72px rgba(0,0,0,0.92),
    0 0 0 1px rgba(0,255,255,0.07) inset,
    0 1px 0 rgba(255,255,255,0.05) inset;
  box-sizing: border-box;
  scroll-behavior: smooth;
}

/* Scrollbar dropdown */
.custom-select-dropdown::-webkit-scrollbar { width: 5px; }
.custom-select-dropdown::-webkit-scrollbar-track { background: rgba(0,255,255,0.06); border-radius: 4px; }
.custom-select-dropdown::-webkit-scrollbar-thumb { background: rgba(0,255,255,0.3); border-radius: 4px; }

/* ── Bouton fermeture sticky en haut à droite du dropdown ── */
.custom-select-close-btn {
  position: sticky;
  top: 0;
  float: right;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 4px 4px 0 0;
  padding: 4px;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 2;
  border-radius: 50%;
  transition: transform 0.15s ease, filter 0.15s ease;
  /* Empêche le float de perturber le flux des options */
  shape-outside: none;
}
.custom-select-close-btn:hover {
  transform: scale(1.12);
  filter: brightness(1.25);
}
.custom-select-close-btn:active {
  transform: scale(0.93);
}
/* Clearfix après le bouton pour que les options commencent sous lui */
.custom-select-close-btn::after {
  content: none;
}

/* ── Croix de fermeture agrandie dans les modales Livre / Chapitre ── */
/* SVG 36 → 48px ; la boîte du bouton suit (48 + 8px de padding = 56px) */
.cs-book-modal .custom-select-close-btn,
.cs-drum-modal .custom-select-close-btn {
  width: 56px;
  height: 56px;
}
.cs-book-modal .custom-select-close-btn svg,
.cs-drum-modal .custom-select-close-btn svg {
  width: 48px;
  height: 48px;
}


.custom-select-wrapper.is-open .custom-select-dropdown,
.custom-select-dropdown.is-open {
  display: block;
  animation: csDropIn 0.22s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes csDropIn {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.92); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* Label de groupe */
.custom-select-optgroup {
  padding: 10px 16px 6px;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgba(0,255,255,0.55);
  background: transparent;
  border-top: 1px solid rgba(0,255,255,0.10);
  pointer-events: none;
  text-align: left;
  padding-left: 20px;
}

.custom-select-optgroup:first-child {
  border-top: none;
}

/* ── Options livres : grande typographie, grille 2 colonnes ── */

/* Conteneur interne des options : grille 2 colonnes */
.custom-select-dropdown .cs-options-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 5px;
  padding: 6px 10px 14px;
}

/* Option */
.custom-select-option {
  position: relative;
  padding: 9px 8px;
  font-size: 1.0rem;
  font-weight: 700;
  color: #c8d8f0;
  cursor: pointer;
  outline: none;
  -webkit-appearance: none;
  transition: background 0.12s ease, color 0.12s ease, transform 0.10s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  background: linear-gradient(135deg, #111820 0%, #0c1018 100%);
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow:
    0 3px 8px rgba(0,0,0,0.65),
    0 1px 0 rgba(0,0,0,0.9),
    inset 0 1px 0 rgba(255,255,255,0.07);
}

.custom-select-option:hover,
.custom-select-option:active {
  background: linear-gradient(135deg, #172235 0%, #101825 100%);
  color: #ffffff;
  transform: scale(1.02);
  border-color: rgba(0,200,255,0.28);
  box-shadow:
    0 4px 12px rgba(0,0,0,0.70),
    0 1px 0 rgba(0,0,0,0.9),
    inset 0 1px 0 rgba(0,220,255,0.12);
}

.custom-select-option.is-selected {
  background: linear-gradient(135deg, #0b2035 0%, #071525 100%);
  color: #00ffff;
  font-weight: 800;
  border-color: rgba(0,200,255,0.50);
  box-shadow:
    0 3px 10px rgba(0,150,255,0.20),
    0 1px 0 rgba(0,0,0,0.9),
    inset 0 0 0 1px rgba(0,200,255,0.25),
    inset 0 0 12px rgba(0,160,255,0.10);
  text-shadow: 0 0 12px rgba(0,255,255,0.60);
}

/* Variante responsive — sur petits écrans le dropdown peut remonter */
@media (max-width: 480px) {
  .custom-select-trigger {
    padding: 0.7rem 0.65rem;
    font-size: 0.92rem;
  }
  .custom-select-option {
    padding: 9px 8px 9px 34px;
    /* ══ TAILLE OPTIONS sur petits écrans (< 480px) ══ */
    font-size: 1.05rem;
    min-height: 46px;
  }
}

/* Masquer le <select> natif sous-jacent (gardé pour accessibilité/form) */
.custom-select-wrapper select.book-select-hidden,
.custom-select-wrapper select.tts-select-hidden {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
  top: 0;
  left: 0;
}

/* ── Variante TTS : trigger compact dark ── */
.tts-row .custom-select-wrapper {
  flex: 1;
  min-width: 0;
}
.tts-row .custom-select-trigger {
  padding: 6px 10px;
  background: rgba(255,255,255,0.05);
  border: 1.5px solid rgba(0,255,255,0.25);
  border-radius: 8px;
  font-size: 0.82rem;
  min-height: 36px;
  color: #e0e0e0;
  transition: border-color 0.2s;
}
.tts-row .custom-select-trigger:hover,
.tts-row .custom-select-trigger:focus {
  background: rgba(255,255,255,0.08);
  border-color: rgba(0,255,255,0.55);
  box-shadow: none;
}
.tts-row .custom-select-label {
  font-size: 0.82rem;
  color: #e0e0e0;
}
.tts-row .custom-select-label.placeholder {
  color: rgba(255,255,255,0.4);
}

/* ── Dropdown TTS : menu compact et lisible ── */
/* Cible .cs-tts (et non .tts-row) car le dropdown est déplacé sous <body> à l'ouverture */
.custom-select-dropdown.cs-tts {
  width: min(86vw, 320px);
  padding: 46px 10px 10px;   /* place en haut pour le bouton fermer */
  border-radius: 16px;
}
/* Bouton fermer : ancré en haut à droite, sans chevaucher la 1re option */
.cs-tts .custom-select-close-btn {
  position: absolute;
  top: 7px;
  right: 7px;
  float: none;
  margin: 0;
  width: 36px;
  height: 36px;
}
.cs-tts .custom-select-close-btn svg {
  width: 30px;
  height: 30px;
}
.cs-tts .custom-select-option {
  font-size: 0.92rem;
  min-height: 42px;
  padding: 10px 14px;
  margin-bottom: 6px;
  color: rgba(255,255,255,0.72);
  justify-content: flex-start;  /* texte ferré à gauche */
  text-align: left;
  border-radius: 10px;
}
.cs-tts .custom-select-option:last-child {
  margin-bottom: 0;
}
.cs-tts .custom-select-option:hover,
.cs-tts .custom-select-option:active {
  background: rgba(0,255,255,0.10);
  color: #e0e0e0;
}
.cs-tts .custom-select-option.is-selected {
  background: rgba(0,255,255,0.08);
  color: #00ffff;
  font-weight: 600;
}
/* Voix françaises mises en avant */
.cs-tts .custom-select-option.is-highlighted {
  color: #00ffff;
}
.cs-tts .custom-select-option.is-highlighted:hover,
.cs-tts .custom-select-option.is-highlighted:active {
  color: #00ffff;
  background: rgba(0,255,255,0.14);
}

/* Séparateur visuel entre voix FR et les autres */
.cs-tts .custom-select-option:not(.is-highlighted):first-of-type {
  border-top: 1px solid rgba(255,255,255,0.1);
  margin-top: 4px;
  padding-top: 10px;
}

/* État désactivé du custom select */
.custom-select-wrapper.is-disabled .custom-select-trigger {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* ── quickNavPanel : triggers plus hauts pour une meilleure accessibilité tactile ── */
#quickNavPanel .custom-select-trigger {
  padding: 0.75rem 0.75rem;
  min-height: 56px;
}

/* ── Font-size pour les dropdowns dans le panneau de nav rapide et la page d'accueil ── */
#quickNavPanel .custom-select-dropdown,
.slide-content .custom-select-dropdown {
  font-size: 1.15rem;
}

#quickNavPanel .custom-select-dropdown .custom-select-option,
.slide-content .custom-select-dropdown .custom-select-option {
  font-size: 1.15rem;
}

#quickNavPanel .custom-select-dropdown .custom-select-optgroup,
.slide-content .custom-select-dropdown .custom-select-optgroup {
  font-size: 0.72rem;
}

/* ── welcome-screen : placeholder à 1.1rem ── */
.welcome-screen .custom-select-label.placeholder {
  font-size: 1.1rem !important;
}
/* ── welcome-screen : custom-select trigger label (valeur sélectionnée) ── */
.welcome-screen .custom-select-trigger {
  font-size: 1.1rem;
}

/* NOTE : les règles .welcome-screen .custom-select-dropdown sont inutiles
   car le JS téléporte le dropdown dans <body> via document.body.appendChild().
   Les tailles sont donc définies directement sur .custom-select-option
   et .custom-select-optgroup ci-dessus (lignes avec ══). */

/* ── Texte des sélecteurs Livre (AT/NT) et Chapitre agrandi ──
   Cible le label visible dans le trigger, sur l'accueil ET dans le
   panneau de navigation (les deux utilisent .book-selector-dual / .book-selector).
   !important pour passer devant le placeholder .welcome-screen et la media query. */
.book-selector-dual .custom-select-label,
.book-selector .custom-select-label,
.book-selector-dual .custom-select-label.placeholder,
.book-selector .custom-select-label.placeholder {
  font-size: 1.25rem !important;
}

/* ── Page d'accueil : custom-select plus compact pour tenir sans scroll ── */
.welcome-screen .custom-select-trigger {
  padding: 0.75rem 0.65rem;
  min-height: 56px;
}
.welcome-screen .book-selector-dual {
  margin-top: 0 !important;
}
.welcome-screen .book-selector {
  margin-top: 8px;
}
.welcome-screen .welcome-menu {
  margin-top: 16px !important;
}
.welcome-screen .bloc-notes-nav-btn {
  margin-top: 16px !important;
  font-size: 1.1rem !important;
  justify-content: space-around;
}
.welcome-screen .bloc-notes-nav-btn svg:first-child {
  width: 28px;
  height: 28px;
}

/* ── welcome-screen : bouton Introduction/Étude/Auteur ── */
.iea-col-label {
  font-size: 1.05rem;
  font-weight: 600;
}


/* Désactive transitions pendant l'init (évite flash au chargement) */
.qnp-no-transition .qnp-collapsible-wrap,
.qnp-no-transition .qnp-collapsible-wrap > * {
  transition: none !important;
}

/* ── Mode compact du quickNavPanel ── */
/* Technique grid 1fr→0fr + opacity : zéro reflow, 100% fluide          */
/* Le margin-top negatif annule le gap:0.85rem du panel flex parent      */

.qnp-collapsible-wrap {
  display: grid;
  grid-template-rows: 1fr;
  opacity: 1;
  margin-top: 0;
  overflow: hidden;
  transition:
    grid-template-rows 0.35s cubic-bezier(0.4, 0.0, 0.2, 1),
    opacity            0.28s cubic-bezier(0.4, 0.0, 0.2, 1),
    margin-top         0.35s cubic-bezier(0.4, 0.0, 0.2, 1);
}

/* L'enfant direct doit avoir min-height:0 pour que 0fr colle vraiment à 0 */
.qnp-collapsible-wrap > * {
  min-height: 0;
}

/* Etat compact : réduction grid + masquage */
.quick-nav-panel.is-compact .qnp-collapsible-wrap {
  grid-template-rows: 0fr;
  opacity: 0;
  margin-top: -0.85rem;
}

/* (Le margin:0 compact a été retiré : il supprimait le margin-top:10px de
   .book-selector et réduisait l'écart avec .book-selector-dual. L'espace
   entre ces deux blocs visibles doit rester identique en mode compact.) */

/* En mode compact, les blocs du bas sont repliés : on réduit le padding-bottom
   du panneau pour rééquilibrer l'espace sous le sélecteur de livre. */
.quick-nav-panel.is-compact {
  padding-bottom: 0.25rem;
}

/* En mode compact, .search-close-row (maison + switchs + fermer) et
   .book-selector-dual (Genèse / Nouveau) se retrouvent trop proches :
   le gap standard de 0.85rem du panel ne suffit plus visuellement une
   fois les blocs du bas repliés, et un doigt peut toucher un des
   éléments du haut par erreur. On ajoute donc une marge supplémentaire
   sous .search-close-row, uniquement en mode compact. */
.quick-nav-panel.is-compact .search-close-row {
  margin-bottom: 0.75rem;
}

/* ── Overlay du menu de navigation rapide ── */
.quick-nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 999; /* juste en dessous du quickNav (z-index 1000) */
  background: rgba(0, 0, 0, 0.80); /* opaque comme centered-modal-overlay */
}

.quick-nav-overlay.active {
  display: block;
}


/* ════════════════════════════════════════════════════════════
   Bouton « Note de section ou de chapitre » (header modale verset)
   Style net et plat, accordé au thème cyan — remplace l'ancien
   bouton 3D doré qui se confondait avec le fond sombre.
   ════════════════════════════════════════════════════════════ */
/* Bouton « Note de chapitre » — verre bleu profond + cerclage chromé (SVG)
   Texte agrandi, cadre affiné. Hauteur 56px (alignée ZOOM / fermer). */
.note-section-btn {
  display: block;
  height: 56px;
  width: auto;
  flex-shrink: 0;
  transform: translateY(-1px) scale(1.04);
  filter:
    drop-shadow(0 1px 1px rgba(0,0,0,0.55))
    brightness(1.07);
  transition: transform 0.14s ease, filter 0.18s ease;
}
.note-section-btn text {
  letter-spacing: 0.3px;
}
.note-section-btn:active {
  transform: translateY(1px) scale(0.96);
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.55)) brightness(0.95);
}

/* ════════════════════════════════════════════════════════════
   ZOOM DU TEXTE DES NOTES — bloc vertical −/+ dans le header
   ════════════════════════════════════════════════════════════ */

/* ── Bloc zoom vertical (− en haut, + en bas) ── */
.vm-zoom-stepper {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  line-height: 0;                 /* évite l'espace sous le SVG inline */
  -webkit-tap-highlight-color: transparent;
}
.vm-zoom-stepper__svg { display: block; }
/* Léger retour visuel à l'appui sur une zone (pas d'effet au survol) */
.vm-zoom-stepper__svg g[role="button"] { transition: opacity 0.12s ease; }
.vm-zoom-stepper__svg g[role="button"]:active { opacity: 0.6; }

/* ════════════════════════════════════════════════════════════
   NOUVELLE MISE EN PAGE DES HEADERS DE MODALE
   - Titre « Verset / N » centré sur 2 lignes
   - Bouton bleu métallique « ZOOM » (ouvre la barre A− / 100% / A+)
   - Icône note dorée sans cadre
   ════════════════════════════════════════════════════════════ */

/* (1) Titre du verset : « Verset » puis le chiffre dessous, centré */
.verse-modal-verse-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-shrink: 0;
  color: #ffffff;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0.1em;
  font-family: Roboto, system-ui, sans-serif;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

/* Bouton bleu métallique « ZOOM » */
.vm-zoom-btn {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  line-height: 0;
  -webkit-tap-highlight-color: transparent;
  outline: none;
  transition: transform 0.12s ease;
}
.vm-zoom-btn:hover { transform: scale(1.05); }
.vm-zoom-btn:active { transform: scale(0.94); }
.vm-zoom-btn__svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* (3) Icône note dorée — sans cadre, juste l'image */
.vm-note-icon-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 74px;          /* ratio du livre (≈600/452) à 56px de haut → remplit la rangée */
  height: 56px;
  cursor: pointer;
  line-height: 0;
  -webkit-tap-highlight-color: transparent;
  outline: none;
  transition: transform 0.12s ease;
}
.vm-note-icon-btn:hover { transform: scale(1.06); }
.vm-note-icon-btn:active { transform: scale(0.94); }
.vm-note-icon-btn__svg { display: block; width: 100%; height: 100%; }

/* (2)/(4) Mini-modale de réglage de la taille du texte */
.vm-zoom-popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 7000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  opacity: 0;
  transition: opacity 0.22s ease;
}
.vm-zoom-popup-overlay.vm-zoom-popup-visible {
  opacity: 1;
}
.vm-zoom-popup {
  background: #0c1021;
  border: 2px solid #00ffff;
  border-radius: 16px;
  box-shadow: 0 0 32px rgba(0, 255, 255, 0.30);
  padding: 18px;
  width: 100%;
  max-width: 320px;
  transform: translateY(12px) scale(0.97);
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.vm-zoom-popup-overlay.vm-zoom-popup-visible .vm-zoom-popup {
  transform: translateY(0) scale(1);
}
.vm-zoom-popup-title {
  text-align: center;
  color: #00ffff;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.03em;
  font-family: Roboto, system-ui, sans-serif;
  margin-bottom: 12px;
}
/* La barre A− / 100% / A+ reprend le style existant .zoom-control */
.vm-zoom-popup .zoom-control { margin: 0; }

/* ════════════════════════════════════════════════════════════════════════
   MODE DE LECTURE — page de garde
   Nouvelle disposition (plus aérée) :
     1) rangée du sélecteur de chapitre, seul et centré
     2) rangée des 2 boutons verre (toggle exclusif), espacés aux extrémités
     3) texte animé « Lecture Seule » / « Lecture + Option »
   Boutons adaptés (réduits) depuis boutons.html ; IDs SVG suffixés -rm.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Rangée du sélecteur de chapitre (seul, centré, largeur contenue) ── */
.rm-chapter-row{
  display:flex;
  justify-content:center;
  width:100%;
  margin-top:clamp(10px,2.2vh,16px);
}
.rm-chapter-row .rm-chapter{
  width:58%;
  min-width:150px;
  max-width:230px;
  margin:0 !important;
}

/* ── Rangée des 2 boutons verre ── */
.reading-mode-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  margin-top:clamp(14px,3vh,22px);
  /* Marge additionnelle (au-delà du padding de .welcome-screen) pour que le
     halo (box-shadow, jusqu'à ~56px de portée) ne soit pas tronché par le
     overflow:hidden du conteneur .welcome-screen. */
  padding:0 clamp(30px,9vw,50px);
  box-sizing:border-box;
}

/* ── Bouton verre bouteille (toggle) ── */
.rm-toggle{
  flex:0 0 auto;
  width:clamp(58px,16.5vw,70px);
  height:clamp(58px,16.5vw,70px);
  border:0; background:none; padding:0; cursor:pointer;
  border-radius:50%; position:relative; outline:none;
  -webkit-tap-highlight-color:transparent;
  transform:translateY(0) scale(1); filter:brightness(1);
  box-shadow:none;
  transition:transform 140ms cubic-bezier(.2,.8,.3,1.1), filter 140ms, box-shadow 220ms ease;
}
.rm-toggle svg{ width:100%; height:100%; display:block; pointer-events:none; }
.rm-toggle:focus-visible{ box-shadow:0 0 0 3px #00ffff; }
.rm-toggle:active{ transform:scale(.99); }

/* couleurs de halo (lumière diffuse à l'état ACTIF) */
.rm-toggle-green{ --g1:rgba(48,210,130,.50); --g2:rgba(48,210,130,.30); --g3:rgba(48,210,130,.15); }
.rm-toggle-blue { --g1:rgba(70,150,250,.55); --g2:rgba(70,150,250,.32); --g3:rgba(70,150,250,.17); }
.rm-toggle.engaged{ box-shadow:0 0 12px 1px var(--g1), 0 0 26px 6px var(--g2), 0 0 44px 12px var(--g3); }

/* enfoncement du verre + verre éclairé à l'état ACTIF */
.rm-toggle .dome-press{ transform-box:view-box; transform-origin:300px 300px; transition:transform 140ms cubic-bezier(.2,.8,.3,1.1); }
.rm-toggle.engaged .dome-press{ transform:scale(.90); }
.rm-toggle .glow-core{ opacity:0; transition:opacity 220ms ease; }
.rm-toggle.engaged .glow-core{ opacity:1; }
.rm-toggle .rim-lit{ opacity:0; transition:opacity 220ms ease; }
.rm-toggle.engaged .rim-lit{ opacity:1; }

/* rebond gélatine (sortie = ample, enfoncement = léger) */
@keyframes rmGelatine{   from,to{transform:scale(1,1)} 25%{transform:scale(.9,1.1)}  50%{transform:scale(1.1,.9)}  75%{transform:scale(.95,1.05)} }
@keyframes rmGelatineIn{ from,to{transform:scale(1,1)} 25%{transform:scale(.93,1.07)} 50%{transform:scale(1.06,.94)} 75%{transform:scale(.97,1.03)} }
.rm-toggle .dome-wobble{ transform-box:view-box; transform-origin:300px 300px; }
.rm-toggle.pop    .dome-wobble{ animation:rmGelatine   .5s ease; }
.rm-toggle.pop-in .dome-wobble{ animation:rmGelatineIn .5s ease; }

/* ── Texte animé Lecture Seule / Lecture + Option ── */
.reading-mode-label{
  width:100%;
  display:flex; align-items:center; justify-content:center;
  min-height:clamp(34px,6vh,50px);
  margin-top:clamp(4px,1.2vh,10px);
}
.rm-anim-text{
  margin:0;
  font-family:'Space Grotesk','Roboto',system-ui,sans-serif;
  font-weight:700;
  font-size:clamp(1.3rem,6.2vw,2rem);
  letter-spacing:.01em;
  line-height:1.05;
  color:#E8EAF0;
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  text-shadow:0 1px 10px rgba(0,0,0,.45);
}
.rm-anim-text .rm-char{ display:inline-block; white-space:pre; }

/* ── Le "+" de "Lecture + Option" : plus grand et d'une couleur qui
   décroche, pour signaler visuellement qu'il s'agit d'une option EN PLUS ── */
.rm-anim-text .rm-char-plus{
  font-size:1.55em;
  font-weight:900;
  color:#FFC94D;
  text-shadow:0 0 14px rgba(255,201,77,.65), 0 1px 10px rgba(0,0,0,.45);
  padding:0 .03em;
}

@media (prefers-reduced-motion: reduce){
  .rm-anim-text .rm-char{ animation:none !important; opacity:1 !important; }
  .rm-toggle .dome-press,
  .rm-toggle .glow-core,
  .rm-toggle .rim-lit{ transition:none; }
}

/* ═══════════════════════════════════════════════════════════
   MODALE "PARTAGER VERSET(S)" — bottom sheet façon appli vidéo
   ═══════════════════════════════════════════════════════════ */
.share-verse-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 7000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  opacity: 0;
  transition: opacity 0.25s ease;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.share-verse-overlay.svo-visible { opacity: 1; }

.share-verse-panel {
  position: relative;
  width: 100%;
  max-width: 460px;
  background: #0c1021;
  border: 1.5px solid rgba(0, 255, 255, 0.55);
  border-radius: 20px;
  box-shadow: 0 0 0 1px rgba(0,255,255,0.12),
              0 8px 40px rgba(0,0,0,0.55),
              0 0 44px rgba(0,255,255,0.22);
  padding: 10px 18px 20px 18px;
  transform: translateY(20px) scale(0.97);
  transition: transform 0.32s cubic-bezier(0.34, 1.15, 0.4, 1);
  touch-action: none;
}
.share-verse-overlay.svo-visible .share-verse-panel {
  transform: translateY(0) scale(1);
}
.share-verse-panel.svp-dragging { transition: none; }

.svp-handle {
  width: 44px;
  height: 5px;
  border-radius: 3px;
  background: rgba(255,255,255,0.28);
  margin: 4px auto 14px auto;
}

.svp-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  padding-right: 40px;
}

.svp-icon {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 255, 255, 0.10);
  border: 1.5px solid rgba(0, 255, 255, 0.45);
  color: #00ffff;
  box-shadow: 0 0 14px rgba(0,255,255,0.25);
}
.svp-icon svg { width: 22px; height: 22px; }

.svp-title {
  flex: 1;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700;
  font-size: 1.2rem;
  color: #eaf6ff;
  letter-spacing: 0.01em;
}

.svp-close {
  position: absolute;
  top: 12px;
  right: 12px;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: #8fe9f5;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
  transition: transform 0.15s;
}
.svp-close:hover { transform: scale(1.05); }
.svp-close:active { transform: scale(0.9); }
.svp-close svg { width: 44px; height: 44px; overflow: visible; }

.svp-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 18px;
}

.svp-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: none;
  padding: 4px 0;
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
  font-family: Roboto, system-ui, sans-serif;
}

.svp-option-circle {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.svp-option:active .svp-option-circle { transform: scale(0.92); }
.svp-option-circle svg { width: 24px; height: 24px; }

.svp-option-whatsapp .svp-option-circle {
  background: radial-gradient(circle at 35% 30%, #3fe07a, #17a24a 70%);
  box-shadow: 0 0 16px rgba(37, 211, 102, 0.45);
}
.svp-option-copy .svp-option-circle {
  background: radial-gradient(circle at 35% 30%, #2fe3e3, #0c8f9a 70%);
  box-shadow: 0 0 16px rgba(0, 210, 210, 0.45);
}
.svp-option-sms .svp-option-circle {
  background: radial-gradient(circle at 35% 30%, #4d9bff, #1c5fd6 70%);
  box-shadow: 0 0 16px rgba(45, 110, 255, 0.45);
}
.svp-option-email .svp-option-circle {
  background: radial-gradient(circle at 35% 30%, #ffb347, #e8862a 70%);
  box-shadow: 0 0 16px rgba(255, 150, 40, 0.45);
}

.svp-option-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: #cdd8e6;
}

.svp-more {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 16px;
  border-radius: 14px;
  border: 1.5px solid rgba(0, 255, 255, 0.45);
  background: rgba(0, 255, 255, 0.06);
  color: #00ffff;
  font-family: Roboto, system-ui, sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
  transition: background 0.18s;
}
.svp-more:hover { background: rgba(0,255,255,0.12); }
.svp-more:active { transform: scale(0.98); }
.svp-more svg { width: 19px; height: 19px; flex-shrink: 0; }
.svp-more[hidden] { display: none; }