/* ================================================================
   BIBLE L.E.D - STYLESHEET PRINCIPAL
   ================================================================
   
   INDEX DES SECTIONS :
   ===================
   1.  VARIABLES ET CONFIGURATION GLOBALE
   2.  LAYOUT ET STRUCTURE DE BASE
   3.  MENU LATÉRAL ET NAVIGATION
   4.  LECTURE BIBLIQUE ET CHAPITRES
   5.  BOUTONS ET CONTRÔLES
   6.  RECHERCHE ET FILTRES
   7.  NOTES, FAVORIS ET JOURNAL
   8.  NOTIFICATIONS ET MODALES
   9.  SYNCHRONISATION GOOGLE DRIVE
   10. MODE NUIT/CLAIR
   11. RESPONSIVE DESIGN
   12. ANIMATIONS ET EFFETS
   
   ================================================================ */

/* ================================================================
   1. VARIABLES ET CONFIGURATION GLOBALE
   ================================================================ */
:root {
  /* Couleurs principales */
  --menu-bg: #252440;
  --gold-accent: #e8b923;
  --gold-light: #fffbe6;
  --gold-glow: #ffe082;
  --blue-deep: #1a2340;
  --blue-light: #2d3a5f;
  
  /* Nouvelles couleurs pour améliorer l'interface */
  --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --gold-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  --divine-gradient: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  --success-color: #4caf50;
  --warning-color: #ff9800;
  --error-color: #f44336;
  --info-color: #2196f3;
  
  /* États de navigation SPA */
  --nav-active-bg: rgba(232, 185, 35, 0.3);
  --nav-active-border: rgba(232, 185, 35, 0.8);
  --nav-active-shadow: 0 0 20px rgba(232, 185, 35, 0.4);
  
  /* Ombres et effets */
  --shadow-light: 0 2px 8px rgba(0,0,0,0.1);
  --shadow-medium: 0 4px 16px rgba(0,0,0,0.15);
  --shadow-heavy: 0 8px 32px rgba(0,0,0,0.2);
  --shadow-gold: 0 4px 20px rgba(232,185,35,0.3);
  
  /* Configuration générale */
  --border-radius: 12px;
  --border-radius-large: 20px;
  --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  
  /* Polices de caractères */
  --font-divine: 'Playfair Display', serif;
  --font-script: 'Dancing Script', cursive;
  --font-elegant: 'Great Vibes', cursive;
  --font-readable: 'Crimson Text', serif;
  --font-modern: 'Inter', sans-serif;
}

/* ================================================================
   2. LAYOUT ET STRUCTURE DE BASE
   ================================================================ */

/* Configuration du body et fond d'écran */
/* Styles pour les pages autres que l'accueil */
body:not(.home-page) {
  font-family: var(--font-readable);
  background: url('imagefond.png') center center/cover no-repeat fixed !important;
  position: relative;
  margin: 0;
  min-height: 100vh;
  transition: var(--transition-smooth);
  overflow-x: hidden;
  padding-top: 70px;
}

/* Mode nuit - retirer l'image de fond */
body:not(.home-page).night-mode {
  background: transparent !important;
}

/* Exception pour la page histoires-enfants.html */
body[data-page="enfants"] {
  background: linear-gradient(45deg, #FF6B6B, #4ECDC4, #45B7D1, #96CEB4, #FFEAA7, #DDA0DD, #98D8C8) !important;
  background-attachment: fixed !important;
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  animation: rainbowMove 20s ease-in-out infinite !important;
}

/* Exception pour la page lecture biblique - permettre l'image de fond */
body[data-page="lecture-biblique"] {
  background: url('imagefond.png') center center/cover no-repeat fixed !important;
}

/* Exception pour la page lecture biblique en mode nuit - retirer l'image de fond */
body[data-page="lecture-biblique"].night-mode {
  background: transparent !important;
}

/* S'assurer que les autres pages gardent leur image de fond */
body:not([data-page="enfants"]):not([data-page="lecture-biblique"]) {
  background: url('imagefond.png') center center/cover no-repeat fixed !important;
}

/* Mode nuit pour les autres pages - retirer l'image de fond */
body:not([data-page="enfants"]):not([data-page="lecture-biblique"]).night-mode {
  background: transparent !important;
}

/* Règle plus spécifique pour surcharger les styles inline */
html body:not([data-page="enfants"]):not([data-page="lecture-biblique"]) {
  background: url('imagefond.png') center center/cover no-repeat fixed !important;
}

/* Mode nuit pour la règle plus spécifique - retirer l'image de fond */
html body:not([data-page="enfants"]):not([data-page="lecture-biblique"]).night-mode {
  background: transparent !important;
}

/* Règle encore plus spécifique pour les pages avec des styles inline */
html body:not([data-page="enfants"]):not([data-page="lecture-biblique"])[style*="background"] {
  background: url('imagefond.png') center center/cover no-repeat fixed !important;
}

/* Mode nuit pour la règle encore plus spécifique - retirer l'image de fond */
html body:not([data-page="enfants"]):not([data-page="lecture-biblique"]).night-mode[style*="background"] {
  background: transparent !important;
}

/* ================================================================
   MODE NUIT - RETIRER TOUS LES CADRES
   ================================================================ */

/* Retirer tous les cadres en mode nuit */
body.night-mode * {
  border: none !important;
  border-color: transparent !important;
  border-width: 0 !important;
  border-style: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Exceptions pour les éléments qui ont besoin de bordures subtiles */
body.night-mode .verse,
body.night-mode .container,
body.night-mode .content,
body.night-mode .wrapper,
body.night-mode .section,
body.night-mode .panel,
body.night-mode .box,
body.night-mode .card,
body.night-mode .modal-content,
body.night-mode .header,
body.night-mode .footer,
body.night-mode .main-content,
body.night-mode .notes-favs-modern,
body.night-mode .advanced-search-modern,
body.night-mode .note-modal > div,
body.night-mode .verse-card,
body.night-mode .verse-text,
body.night-mode .verse-detail,
body.night-mode .verse-reference,
body.night-mode .verse-action-btn,
body.night-mode .bible-container,
body.night-mode .bible-verse-row,
body.night-mode .chapter-navigation,
body.night-mode .book-selector,
body.night-mode .chapter-selector,
body.night-mode .nav-btn,
body.night-mode .action-btn,
body.night-mode .welcome-message,
body.night-mode .verse-end-actions,
body.night-mode .verse-favorite-btn,
body.night-mode .verse-note-btn,
body.night-mode .verse-highlight-btn,
body.night-mode .control-btn,
body.night-mode .video-menu,
body.night-mode .video-option {
  border: none !important;
  border-color: transparent !important;
  border-width: 0 !important;
  border-style: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Retirer les bordures des inputs et boutons en mode nuit */
body.night-mode input,
body.night-mode textarea,
body.night-mode select,
body.night-mode button {
  border: none !important;
  border-color: transparent !important;
  border-width: 0 !important;
  border-style: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Retirer les bordures des éléments de navigation */
body.night-mode .side-menu,
body.night-mode .menu-item,
body.night-mode .nav-item,
body.night-mode .breadcrumb,
body.night-mode .pagination {
  border: none !important;
  border-color: transparent !important;
  border-width: 0 !important;
  border-style: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* ================================================================
   RÈGLES ULTRA-AGRESSIVES POUR ÉLIMINER TOUS LES TRAITS
   ================================================================ */

/* Règle ultra-spécifique pour éliminer TOUS les traits */
html body.night-mode,
html body.night-mode *,
html body.night-mode *::before,
html body.night-mode *::after,
html body.night-mode [class*="border"],
html body.night-mode [style*="border"],
html body.night-mode [style*="Border"],
html body.night-mode [style*="BORDER"] {
  border: 0 !important;
  border-width: 0 !important;
  border-style: none !important;
  border-color: transparent !important;
  border-top: 0 !important;
  border-right: 0 !important;
  border-bottom: 0 !important;
  border-left: 0 !important;
  border-top-width: 0 !important;
  border-right-width: 0 !important;
  border-bottom-width: 0 !important;
  border-left-width: 0 !important;
  border-top-style: none !important;
  border-right-style: none !important;
  border-bottom-style: none !important;
  border-left-style: none !important;
  border-top-color: transparent !important;
  border-right-color: transparent !important;
  border-bottom-color: transparent !important;
  border-left-color: transparent !important;
  outline: 0 !important;
  outline-width: 0 !important;
  outline-style: none !important;
  outline-color: transparent !important;
  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
}

/* Éliminer les traits sur les éléments spécifiques qui pourraient en avoir */
body.night-mode .verse,
body.night-mode .verse-content,
body.night-mode .verse-number,
body.night-mode .verse-text,
body.night-mode .verse-reference,
body.night-mode .container,
body.night-mode .content,
body.night-mode .wrapper,
body.night-mode .section,
body.night-mode .panel,
body.night-mode .box,
body.night-mode .card,
body.night-mode .modal,
body.night-mode .modal-content,
body.night-mode .header,
body.night-mode .footer,
body.night-mode .main-content,
body.night-mode .page-header,
body.night-mode .navigation-section,
body.night-mode .verses-section,
body.night-mode .actions-section,
body.night-mode .book-selector,
body.night-mode .chapter-selector,
body.night-mode .nav-btn,
body.night-mode .action-btn,
body.night-mode .control-btn,
body.night-mode .welcome-message,
body.night-mode .verse-end-actions,
body.night-mode .verse-favorite-btn,
body.night-mode .verse-note-btn,
body.night-mode .verse-highlight-btn,
body.night-mode .bible-container,
body.night-mode .bible-verse-row,
body.night-mode .chapter-navigation,
body.night-mode .verse-card,
body.night-mode .verse-detail,
body.night-mode .verse-action-btn,
body.night-mode .verse-reference,
body.night-mode .side-menu,
body.night-mode .menu-item,
body.night-mode .nav-item,
body.night-mode .breadcrumb,
body.night-mode .pagination,
body.night-mode input,
body.night-mode textarea,
body.night-mode select,
body.night-mode button,
body.night-mode .btn,
body.night-mode .button,
body.night-mode .form-control,
body.night-mode .form-group,
body.night-mode .form-element,
body.night-mode .search-box,
body.night-mode .search-input,
body.night-mode .dropdown,
body.night-mode .dropdown-menu,
body.night-mode .dropdown-item,
body.night-mode .tab,
body.night-mode .tab-content,
body.night-mode .tab-pane,
body.night-mode .accordion,
body.night-mode .accordion-item,
body.night-mode .accordion-header,
body.night-mode .accordion-body,
body.night-mode .alert,
body.night-mode .notification,
body.night-mode .tooltip,
body.night-mode .popover,
body.night-mode .badge,
body.night-mode .label,
body.night-mode .tag,
body.night-mode .chip,
body.night-mode .divider,
body.night-mode .separator,
body.night-mode .line,
body.night-mode .rule,
body.night-mode hr,
body.night-mode .hr,
body.night-mode table,
body.night-mode td,
body.night-mode th,
body.night-mode tr,
body.night-mode thead,
body.night-mode tbody,
body.night-mode tfoot,
body.night-mode .table,
body.night-mode .cell,
body.night-mode .row,
body.night-mode .col,
body.night-mode .column,
body.night-mode .grid,
body.night-mode .flex,
body.night-mode .flexbox {
  border: 0 !important;
  border-width: 0 !important;
  border-style: none !important;
  border-color: transparent !important;
  border-top: 0 !important;
  border-right: 0 !important;
  border-bottom: 0 !important;
  border-left: 0 !important;
  border-top-width: 0 !important;
  border-right-width: 0 !important;
  border-bottom-width: 0 !important;
  border-left-width: 0 !important;
  border-top-style: none !important;
  border-right-style: none !important;
  border-bottom-style: none !important;
  border-left-style: none !important;
  border-top-color: transparent !important;
  border-right-color: transparent !important;
  border-bottom-color: transparent !important;
  border-left-color: transparent !important;
  outline: 0 !important;
  outline-width: 0 !important;
  outline-style: none !important;
  outline-color: transparent !important;
  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
}

/* Éliminer les traits sur les pseudo-éléments */
body.night-mode *::before,
body.night-mode *::after {
  border: 0 !important;
  border-width: 0 !important;
  border-style: none !important;
  border-color: transparent !important;
  outline: 0 !important;
  outline-width: 0 !important;
  outline-style: none !important;
  outline-color: transparent !important;
  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
}

/* Bulles colorées flottantes pour la page enfants */
body[data-page="enfants"]::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    radial-gradient(circle at 20% 30%, rgba(255, 107, 107, 0.3) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(78, 205, 196, 0.3) 0%, transparent 50%),
    radial-gradient(circle at 40% 70%, rgba(69, 183, 209, 0.3) 0%, transparent 50%),
    radial-gradient(circle at 90% 80%, rgba(150, 206, 180, 0.3) 0%, transparent 50%),
    radial-gradient(circle at 10% 90%, rgba(255, 234, 167, 0.3) 0%, transparent 50%);
  background-repeat: no-repeat;
  background-size: 300px 300px;
  animation: bubbleFloat 15s ease-in-out infinite;
  z-index: -1;
  pointer-events: none;
}

@keyframes sparkle {
  from { transform: translateY(0px); }
  to { transform: translateY(-100px); }
}

@keyframes rainbowMove {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@keyframes bubbleFloat {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  25% { transform: translateY(-20px) rotate(5deg); }
  50% { transform: translateY(-40px) rotate(0deg); }
  75% { transform: translateY(-20px) rotate(-5deg); }
}

/* Règle spécifique pour exclure l'image de fond sur histoires-enfants.html */
/* Supprimée car en conflit avec la règle colorée plus haut */

body::before {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 0;
  pointer-events: none;
  background: transparent; /* overlay supprimé */
  /* backdrop-filter: blur(...); */
  animation: none;
}

/* Supprimer l'overlay blanc pour la page enfants */
/* Cette règle est supprimée car elle entre en conflit avec les bulles colorées */

/* Vidéo d'arrière-plan pour le mode nuit */
body.night-mode .night-video-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  opacity: 0.8;
  pointer-events: none;
}

body.night-mode::after {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 1;
  pointer-events: none;
  background: transparent !important; /* fond complètement transparent */
  /* backdrop-filter: blur(2px); */ /* effet velours léger */
}

/* Supprime ou neutralise les autres backgrounds ou overlays non transparents */
/* Mode jour - fond transparent glacé léger */
body:not(.night-mode) #notes-favs-container, 
body:not(.night-mode) .main-content, 
body:not(.night-mode) .notes-favs-modern, 
body:not(.night-mode) .advanced-search-modern, 
body:not(.night-mode) .note-modal > div {
  background: rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 15px !important;
}

/* Mode nuit - transparent */
body.night-mode #notes-favs-container, 
body.night-mode .main-content, 
body.night-mode .notes-favs-modern, 
body.night-mode .advanced-search-modern, 
body.night-mode .note-modal > div {
  background: transparent !important;
  backdrop-filter: none !important;
}

/* Mode nuit - tous les conteneurs transparents */
body.night-mode .container,
body.night-mode .content,
body.night-mode .wrapper,
body.night-mode .section,
body.night-mode .panel,
body.night-mode .box,
body.night-mode .card,
body.night-mode .modal-content,
body.night-mode .header,
body.night-mode .footer,
body.night-mode .page-header,
body.night-mode .navigation-section,
body.night-mode .verses-section,
body.night-mode .actions-section,
body.night-mode .book-selector,
body.night-mode .chapter-selector,
body.night-mode .nav-btn,
body.night-mode .action-btn,
body.night-mode .welcome-message,
body.night-mode .verse,
body.night-mode .verse-content,
body.night-mode .verse-text,
body.night-mode .verse-reference,
body.night-mode .verse-end-actions,
body.night-mode .verse-favorite-btn,
body.night-mode .verse-note-btn,
body.night-mode .verse-highlight-btn,
body.night-mode .bible-container,
body.night-mode .bible-verse-row,
body.night-mode .chapter-navigation,
body.night-mode .verse-card,
body.night-mode .verse-detail,
body.night-mode .verse-action-btn,
body.night-mode .verse-reference,
body.night-mode .side-menu,
body.night-mode .menu-item,
body.night-mode .nav-item,
body.night-mode .breadcrumb,
body.night-mode .pagination,
body.night-mode input,
body.night-mode textarea,
body.night-mode select,
body.night-mode button,
body.night-mode .btn,
body.night-mode .button,
body.night-mode .form-control,
body.night-mode .form-group,
body.night-mode .form-element,
body.night-mode .search-box,
body.night-mode .search-input,
body.night-mode .dropdown,
body.night-mode .dropdown-menu,
body.night-mode .dropdown-item,
body.night-mode .tab,
body.night-mode .tab-content,
body.night-mode .tab-pane,
body.night-mode .accordion,
body.night-mode .accordion-item,
body.night-mode .accordion-header,
body.night-mode .accordion-body,
body.night-mode .alert,
body.night-mode .notification,
body.night-mode .tooltip,
body.night-mode .popover,
body.night-mode .badge,
body.night-mode .label,
body.night-mode .tag,
body.night-mode .chip,
body.night-mode .divider,
body.night-mode .separator,
body.night-mode .line,
body.night-mode .rule,
body.night-mode hr,
body.night-mode .hr,
body.night-mode table,
body.night-mode td,
body.night-mode th,
body.night-mode tr,
body.night-mode thead,
body.night-mode tbody,
body.night-mode tfoot,
body.night-mode .table,
body.night-mode .cell,
body.night-mode .row,
body.night-mode .col,
body.night-mode .column,
body.night-mode .grid,
body.night-mode .flex,
body.night-mode .flexbox {
  background: transparent !important;
  backdrop-filter: none !important;
}

/* Styles généraux pour tous les conteneurs de contenu en mode jour */
body:not(.night-mode) .container,
body:not(.night-mode) .content,
body:not(.night-mode) .wrapper,
body:not(.night-mode) .section,
body:not(.night-mode) .panel,
body:not(.night-mode) .box,
body:not(.night-mode) .card,
body:not(.night-mode) .modal-content,
body:not(.night-mode) .header,
body:not(.night-mode) .footer {
  background: rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 15px !important;
}

/* Configuration des z-index pour les éléments principaux */
.main-content, .side-menu, .advanced-search-modern, .note-modal > div {
  position: relative;
  z-index: 1;
}

/* Taille de police globale */
body, .main-content, .advanced-search-modern, .note-modal > div {
  font-size: var(--bible-font-size, 1.13em);
  line-height: 1.6;
}

/* Contenu principal avec améliorations */
.main-content {
  margin-left: 320px;
  padding: 40px 24px;
  min-height: 100vh;
  transition: margin-left 0.3s cubic-bezier(.77,0,.18,1);
  position: relative;
}

/* Contenu principal quand le menu est caché */
.main-content.menu-hidden {
  margin-left: 0;
}

/* Contenu principal sans effet de glace */
.main-content::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: transparent;
  /* backdrop-filter: blur(...); */
  border-radius: var(--border-radius-large);
  z-index: -1;
  margin: 20px;
  box-shadow: none;
}

/* Configuration des modales */
.note-modal > div {
  max-width: 98vw !important;
  min-width: 0 !important;
  box-sizing: border-box;
  border-radius: var(--border-radius-large);
  box-shadow: var(--shadow-heavy);
}

/* ================================================================
   3. MENU LATÉRAL ET NAVIGATION
   ================================================================ */

/* Menu latéral principal sans effet de glace */
/* Ancien menu latéral supprimé, remplacé par wahou-menu */
  position: fixed;
  left: 0;
  top: 0;
  width: 320px;
  min-width: 320px;
  height: 100vh;
  background: #0a1a3a;
  color: #e8b923;
  box-shadow: 2px 0 8px rgba(0,0,0,0.15);
  z-index: 2000;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 0 30px 0;
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #e8b923 #252440;
  transition: width 0.3s cubic-bezier(.77,0,.18,1);
  padding-right: 32px;
}
.side-menu.menu-mini {
  width: 0 !important;
  min-width: 0 !important;
  padding: 0 !important;
  border: none !important;
  overflow: hidden !important;
  box-shadow: none !important;
}
.side-menu.menu-hidden {
  left: calc(-100% + 16px) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transition: left 0.3s, opacity 0.3s;
}

/* Ancien bouton close supprimé, remplacé par .toggle-menu-btn */
  position: fixed;
  left: 310px;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  background: linear-gradient(135deg,#ffe082,#e8b923);
  color: #252440;
  border: none;
  border-radius: 50%;
  box-shadow: 0 2px 12px #ffe08299;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2em;
  cursor: pointer;
  z-index: 99999 !important;
  display: flex !important;
  transition: left 0.3s,background 0.2s;
}
.menu-gold-border {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 8px;
  background: linear-gradient(to bottom, #e8b923 0%, #fffbe6 50%, #e8b923 100%);
.menu-harmonieux-top {
  width: 100%;
  height: 64px;
  background: linear-gradient(90deg, #0a1a3a 0%, #113b7a 100%);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 24px;
  padding: 0 32px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  box-shadow: 0 2px 12px #0008;
}

.menu-harmonieux-top h2 {
  color: #e8b923;
  margin: 0 32px 0 0;
  font-family: 'Playfair Display', serif;
  font-size: 2em;
  text-shadow: 0 2px 8px #000a;
  letter-spacing: 2px;
}

.menu-btn {
  background: linear-gradient(90deg, #ffe082 0%, #e8b923 100%);
  color: #0a1a3a;
  border: none;
  border-radius: 18px;
  font-size: 1.1em;
  font-weight: 600;
  margin-right: 12px;
  padding: 10px 26px;
  box-shadow: 0 2px 8px #e8b92355;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}

.menu-btn:hover, .menu-btn:focus {
  background: linear-gradient(90deg, #fff3b0 0%, #ffe082 100%);
  color: #113b7a;
  box-shadow: 0 4px 16px #e8b92388;
}

.menu-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 10px #e8b92344;
}

/* ===== MENU VERTICAL WAHOU ===== */
.wahou-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 90px;
  height: 100vh;
  min-height: 100vh;
  background: var(--blue-deep, #1a2340);
  box-shadow: var(--shadow-heavy, 0 8px 32px rgba(0,0,0,0.2));
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 1000;
  transition: width 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  overflow: visible;
}
.wahou-menu.closed {
  width: 0;
  min-width: 0;
  overflow: hidden;
}
.menu-logo {
  width: 70px;
  height: 70px;
  margin: 24px 0 28px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.menu-logo img {
  width: 100%;
  max-width: 60px;
  border-radius: 50%;
  box-shadow: 0 0 24px var(--gold-accent, #e8b923);
  background: var(--gold-light, #fffbe6);
  padding: 6px;
  transition: box-shadow 0.4s, transform 0.4s;
}
.menu-logo:hover img {
  box-shadow: 0 0 40px var(--gold-glow, #ffe082), 0 0 0 4px var(--gold-accent, #e8b923);
  transform: scale(1.08) rotate(-8deg);
}
.toggle-menu-btn {
  position: absolute;
  right: -18px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--gold-accent, #e8b923);
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  box-shadow: 0 2px 8px var(--gold-glow, #ffe082);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
.toggle-menu-btn:hover {
  background: var(--gold-glow, #ffe082);
}
.menu-list {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.menu-list li {
  width: 90%;
  margin: 10px 0;
}
.menu-list a {
  display: block;
  width: 100%;
  padding: 14px 18px;
  border-radius: var(--border-radius-large, 20px);
  color: var(--gold-light, #fffbe6);
  font-weight: 600;
  text-decoration: none;
  text-align: center;
  background: transparent;
  transition: 
    background 0.3s,
    color 0.3s,
    box-shadow 0.3s,
    letter-spacing 0.3s;
  letter-spacing: 1px;
  font-size: 1.07em;
  box-shadow: none;
}
.menu-list a:hover, .menu-list a:focus {
  background: linear-gradient(90deg, var(--gold-accent, #e8b923) 0%, var(--gold-glow, #ffe082) 100%);
  color: var(--blue-deep, #1a2340);
  box-shadow: 0 2px 18px var(--gold-glow, #ffe082);
  letter-spacing: 2px;
  font-size: 1.13em;
}
.menu-led-btn {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: none;
  margin: 7px 0;
  padding: 7px 0;
  background: none;
  color: var(--gold-accent, #e8b923);
  border: none;
  border-radius: 0;
  font-size: 1.08em;
  font-weight: 600;
  box-shadow: none;
  cursor: pointer;
  transition: color 0.2s, background 0.2s;
  letter-spacing: 0.5px;
  text-align: left;
}
.menu-led-btn:hover, .menu-led-btn:focus {
  color: #ffd700;
  background: rgba(232,185,35,0.08);
  text-shadow: 0 0 6px #ffe08299;
}

/* Grille compacte pour chapitres */
.menu-chapitres-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(38px, 1fr));
  gap: 7px;
  margin: 8px 0 18px 0;
  max-width: 270px;
  padding: 0 6px;
  justify-items: center;
}
.menu-led-btn-chapitre {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  background: #fff;
  color: var(--blue-deep, #1a2340);
  border: 2px solid var(--gold-accent, #e8b923);
  border-radius: 8px;
  font-size: 1.13em;
  font-weight: bold;
  box-shadow: 0 1px 5px #ffe08233;
  transition: box-shadow 0.18s, transform 0.16s, background 0.18s;
  margin: 0;
  padding: 0;
  outline: none;
}
.menu-led-btn-chapitre:hover, .menu-led-btn-chapitre:focus {
  background: #ffe082;
  color: #b98c0a;
  border-color: #ffd700;
  box-shadow: 0 0 12px 2px #ffe082;
  transform: scale(1.07);
}
.menu-led-btn-chapitre:active {
  background: #fffbe6;
  color: #a87c0a;
  box-shadow: 0 1px 2px #ffe08266;
  transform: scale(0.98);
}

/* Scroll pour les listes longues */
#booksMenu, #chaptersMenu, #testamentsMenu {
  max-height: 260px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #e8b923 #252440;
}
nav.menu-vertical-led {
  overflow-y: auto;
  max-height: 100vh;
}

.menu-led-btn:hover, .menu-led-btn:focus {
  background: linear-gradient(90deg, var(--gold-glow, #ffe082) 0%, var(--gold-accent, #e8b923) 100%);
  color: var(--blue-deep, #1a2340);
  box-shadow: 0 0 8px 2px var(--gold-glow, #ffe082);
  transform: scale(1.03);
}
.menu-led-btn-chapitre {
  display: inline-block;
  width: 45px;
  height: 45px;
  margin: 5px 7px 5px 0;
  padding: 0;
  background: linear-gradient(135deg, var(--gold-glow, #ffe082) 60%, var(--gold-accent, #e8b923) 100%);
  color: var(--blue-deep, #1a2340);
  border: 2px solid var(--gold-accent, #e8b923);
  border-radius: 11px;
  font-size: 1.25em;
  font-weight: bold;
  box-shadow: 0 0 12px 2px var(--gold-glow, #ffe082);
  text-align: center;
  vertical-align: middle;
  transition: var(--transition-smooth);
}
.menu-led-btn-chapitre:hover, .menu-led-btn-chapitre:focus {
  background: linear-gradient(135deg, #fffbe6 60%, var(--gold-accent, #e8b923) 100%);
  color: #b98c0a;
  border-color: #ffd700;
  box-shadow: 0 0 18px 6px var(--gold-glow, #ffe082);
  transform: scale(1.11);
  z-index: 2;
}
/* ================================================================
   11. RESPONSIVE DESIGN - DESIGN ADAPTATIF
   ================================================================ */

/* ================================================================
   BREAKPOINTS :
   - Mobile : < 768px
   - Tablet : 768px - 1024px  
   - Desktop : > 1024px
   ================================================================ */

/* ================================================================
   MOBILE FIRST - STYLES DE BASE POUR MOBILE
   ================================================================ */

/* Configuration générale mobile */
@media (max-width: 767px) {
  /* Body et layout général */
  body {
    padding-top: 60px;
    font-size: 14px;
    line-height: 1.5;
  }
  
  /* Menu principal */
  .menu-vertical-led {
    width: 100vw !important;
    height: 100vh !important;
    border-radius: 0 !important;
    left: 0 !important;
    top: 0 !important;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
  }
  
  .menu-vertical-led.show {
    transform: translateX(0);
  }
  
  /* Bouton de fermeture du menu mobile */
  .close-menu-btn {
    top: 20px !important;
    right: 20px !important;
    width: 40px !important;
    height: 40px !important;
    font-size: 18px !important;
    background: rgba(244, 67, 54, 0.9) !important;
  }
  
  /* Logo du menu mobile */
  .menu-logo-glow {
    margin: 20px 0 30px 0 !important;
  }
  
  .menu-logo-glow img {
    width: 80px !important;
    height: 80px !important;
  }
  
  /* Boutons du menu mobile */
  .menu-led-btn {
    padding: 15px 20px !important;
    font-size: 16px !important;
    margin: 8px 0 !important;
  }
  
  
  /* Contenu principal mobile */
  .main-content {
    margin-left: 0 !important;
    padding: 15px !important;
    margin-top: 60px !important;
  }
  
  /* Verset du jour mobile */
  #verse-of-day {
    margin: 20px 10px !important;
    padding: 20px 15px !important;
    border-radius: 15px !important;
  }
  
  #verse-of-day-quote-content {
    font-size: 1.2em !important;
    line-height: 1.6 !important;
  }
  
  /* Grille responsive pour les colonnes */
  .verse-column {
    margin-bottom: 20px !important;
  }
  
  /* Présentation Bible mobile */
  #presentation-bible {
    margin: 20px 10px !important;
    padding: 20px 15px !important;
    border-radius: 15px !important;
  }
  
  /* Menu déroulant mobile */
  .dropdown-menu {
    margin-top: 10px !important;
    border-radius: 10px !important;
  }
  
  .dropdown-btn {
    padding: 15px 20px !important;
    font-size: 15px !important;
  }
  
  .dropdown-submenu {
    margin-left: 15px !important;
  }
  
  /* Grille de chapitres mobile */
  .chapters-grid {
    grid-template-columns: repeat(auto-fit, minmax(35px, 1fr)) !important;
    gap: 5px !important;
    max-width: 100% !important;
  }
  
  .cascade-chapitre-btn {
    width: 35px !important;
    height: 35px !important;
    font-size: 12px !important;
  }
  
  /* Modales mobile */
  .note-modal > div {
    width: 95vw !important;
    max-width: none !important;
    margin: 20px auto !important;
    padding: 20px !important;
  }
  
  /* Barre de recherche mobile */
  #global-search-bar {
    top: 10px !important;
    right: 10px !important;
    left: 10px !important;
    width: auto !important;
  }
  
  #global-search-input {
    width: 100% !important;
    font-size: 14px !important;
  }
  
  /* Notifications mobile */
  .notification {
    top: 70px !important;
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
    font-size: 14px !important;
    padding: 12px 15px !important;
  }
  
  /* Boutons flottants mobile */
  #floating-actions {
    bottom: 20px !important;
    right: 20px !important;
    gap: 10px !important;
  }
  
  #floating-actions button {
    width: 50px !important;
    height: 50px !important;
    font-size: 18px !important;
  }
  
  /* Conteneur de lecture biblique mobile */
  #bible-container {
    padding: 15px !important;
    font-size: 16px !important;
    line-height: 1.7 !important;
  }
  
  .verse {
    padding: 10px 15px !important;
    margin: 8px 0 !important;
    border-radius: 10px !important;
  }
  
  .verse-number {
    font-size: 14px !important;
    margin-right: 8px !important;
  }
  
  /* Actions de verset mobile */
  .verse-actions {
    gap: 8px !important;
    margin-top: 8px !important;
  }
  
  .verse-actions button {
    width: 30px !important;
    height: 30px !important;
    font-size: 12px !important;
  }
  
  /* Menu harmonieux mobile */
  .menu-harmonieux {
    max-width: 95vw !important;
    margin: 20px auto !important;
    padding: 20px 15px !important;
    border-radius: 15px !important;
  }
  
  .menu-harmonieux h2 {
    font-size: 1.8em !important;
  }
  
  .menu-harmonieux .menu-btn {
    padding: 12px 0 !important;
    font-size: 1.1em !important;
  }
  
  /* Wahou menu mobile */
  .wahou-menu {
    width: 100vw !important;
    height: 100vh !important;
    border-radius: 0 !important;
    padding: 15px !important;
  }
  
  .wahou-menu.closed {
    width: 0 !important;
  }
  
  .menu-logo {
    width: 60px !important;
    height: 60px !important;
    margin: 20px 0 30px 0 !important;
  }
  
  .menu-logo img {
    max-width: 50px !important;
    padding: 5px !important;
  }
}

/* ================================================================
   TABLET - STYLES POUR TABLETTES
   ================================================================ */
@media (min-width: 768px) and (max-width: 1023px) {
  /* Menu principal tablet */
  .menu-vertical-led {
    width: 280px !important;
  }
  
  /* Contenu principal tablet */
  .main-content {
    margin-left: 280px !important;
    padding: 20px !important;
  }
  
  
  /* Verset du jour tablet */
  #verse-of-day {
    margin: 30px 20px !important;
    padding: 30px 25px !important;
  }
  
  /* Grille responsive tablet */
  .verse-column {
    min-width: 250px !important;
  }
  
  /* Menu harmonieux tablet */
  .menu-harmonieux {
    max-width: 500px !important;
    margin: 30px auto !important;
  }
  
  /* Wahou menu tablet */
  .wahou-menu {
    width: 280px !important;
  }
  
  .wahou-menu.closed {
    width: 0 !important;
  }
}

/* ================================================================
   DESKTOP - STYLES POUR GRANDS ÉCRANS
   ================================================================ */
@media (min-width: 1024px) {
  /* Menu principal desktop */
  .menu-vertical-led {
    width: 320px !important;
  }
  
  /* Contenu principal desktop */
  .main-content {
    margin-left: 320px !important;
    padding: 30px !important;
  }
  
  
  /* Verset du jour desktop */
  #verse-of-day {
    margin: 40px auto !important;
    padding: 40px 30px !important;
  }
  
  /* Menu harmonieux desktop */
  .menu-harmonieux {
    max-width: 600px !important;
    margin: 40px auto !important;
  }
  
  /* Wahou menu desktop */
  .wahou-menu {
    width: 320px !important;
  }
}

/* ================================================================
   ORIENTATION PAYSAGE SUR MOBILE
   ================================================================ */
@media (max-width: 767px) and (orientation: landscape) {
  /* Menu mobile en paysage */
  .menu-vertical-led {
    width: 100vw !important;
    height: 100vh !important;
  }
  
  
  /* Boutons flottants en paysage */
  #floating-actions {
    bottom: 10px !important;
    right: 10px !important;
  }
  
  /* Contenu principal en paysage */
  .main-content {
    margin-top: 50px !important;
    padding: 10px !important;
  }
}

/* ================================================================
   ÉCRANS TRÈS PETITS (SMARTPHONES COMPACTS)
   ================================================================ */
@media (max-width: 480px) {
  body {
    font-size: 13px !important;
    padding-top: 50px !important;
  }
  
  
  /* Menu très compact */
  .menu-led-btn {
    padding: 12px 15px !important;
    font-size: 14px !important;
    margin: 5px 0 !important;
  }
  
  /* Verset du jour très compact */
  #verse-of-day {
    margin: 15px 5px !important;
    padding: 15px 10px !important;
  }
  
  #verse-of-day-quote-content {
    font-size: 1.1em !important;
  }
  
  /* Grille de chapitres très compacte */
  .chapters-grid {
    grid-template-columns: repeat(auto-fit, minmax(30px, 1fr)) !important;
    gap: 3px !important;
  }
  
  .cascade-chapitre-btn {
    width: 30px !important;
    height: 30px !important;
    font-size: 11px !important;
  }
  
  /* Boutons flottants très compacts */
  #floating-actions button {
    width: 45px !important;
    height: 45px !important;
    font-size: 16px !important;
  }
  
  /* Notifications très compactes */
  .notification {
    top: 60px !important;
    left: 5px !important;
    right: 5px !important;
    font-size: 13px !important;
    padding: 10px 12px !important;
  }
}

/* ================================================================
   ÉCRANS TRÈS LARGES (4K, ULTRA-WIDE)
   ================================================================ */
@media (min-width: 1920px) {
  /* Menu très large */
  .menu-vertical-led {
    width: 400px !important;
  }
  
  /* Contenu principal très large */
  .main-content {
    margin-left: 400px !important;
    padding: 40px !important;
    max-width: 1400px !important;
  }
  
  /* Verset du jour très large */
  #verse-of-day {
    max-width: 1400px !important;
    margin: 50px auto !important;
    padding: 50px 40px !important;
  }
  
  /* Menu harmonieux très large */
  .menu-harmonieux {
    max-width: 800px !important;
    margin: 50px auto !important;
  }
  
  /* Wahou menu très large */
  .wahou-menu {
    width: 400px !important;
  }
}

/* ================================================================
   ACCESSIBILITÉ ET INTERACTION TOUCH
   ================================================================ */

/* Zones de clic minimales pour le touch */
@media (max-width: 767px) {
  button, 
  .menu-led-btn, 
  .dropdown-btn,
  .verse-actions button,
  #floating-actions button {
    min-height: 44px !important;
    min-width: 44px !important;
  }
  
  /* Espacement pour éviter les clics accidentels */
  .menu-led-btn,
  .dropdown-btn {
    margin: 5px 0 !important;
  }
  
  /* Feedback visuel pour le touch */
  button:active,
  .menu-led-btn:active,
  .dropdown-btn:active {
    transform: scale(0.95) !important;
    transition: transform 0.1s ease !important;
  }
}

/* ================================================================
   PERFORMANCE ET ANIMATIONS RESPONSIVES
   ================================================================ */

/* Désactiver les animations lourdes sur mobile */
@media (max-width: 767px) {
  * {
    animation-duration: 0.3s !important;
  }
  
  /* Réduire les ombres sur mobile pour les performances */
  .menu-vertical-led,
  .wahou-menu,
  .note-modal > div {
    box-shadow: 0 2px 10px rgba(0,0,0,0.2) !important;
  }
  
  /* Optimiser les transitions */
  .menu-vertical-led,
  .wahou-menu {
    transition: transform 0.3s ease !important;
  }
}

/* ================================================================
   IMPRESSION ET ÉCRANS NOIRS ET BLANCS
   ================================================================ */
@media print {
  .menu-vertical-led,
  .wahou-menu,
  #floating-actions,
  .notification {
    display: none !important;
  }
  
  .main-content {
    margin-left: 0 !important;
    padding: 20px !important;
  }
  
  body {
    background: white !important;
    color: black !important;
  }
}

@media (prefers-color-scheme: dark) {
  /* Support automatique du mode sombre système - désactivé pour garder l'image de fond */
  body:not(.night-mode) {
    /* background: #1a1a1a !important; */
    /* color: #ffffff !important; */
  }
}

/* ================================================================
   ANCIENS STYLES MOBILE (GARDÉS POUR COMPATIBILITÉ)
   ================================================================ */
@media (max-width: 600px) {
  .wahou-menu {
    width: 70px;
  }
  .wahou-menu.closed {
    width: 0;
  }
  .menu-logo {
    width: 45px;
    height: 45px;
    margin: 14px 0 18px 0;
  }
  .menu-logo img {
    max-width: 40px;
    padding: 3px;
  }
}

/* ================================================================
   STYLES SPÉCIFIQUES À LA LECTURE BIBLIQUE
   ================================================================ */

/* Variables pour la lecture biblique */
:root {
  --bible-font-size: 1.13em;
}

/* Styles spécifiques pour la lecture biblique */
body:not(.home-page) {
  padding-top: 0 !important;
  margin: 0;
  min-height: 100vh;
  font-family: 'Inter', sans-serif;
  font-size: var(--bible-font-size);
  background: url('imagefond.png') center center/cover no-repeat fixed !important;
}

/* Ajouter un léger fond blanc transparent pour améliorer la lisibilité */
.bible-container {
  background: rgba(255, 255, 255, 0.1) !important;
  padding: 20px;
  border-radius: var(--border-radius);
  margin: 20px;
  box-shadow: var(--shadow-medium);
}

.bible-verse-row {
  background: rgba(255, 255, 255, 0.05) !important;
  margin: 10px 0;
  padding: 15px;
  border-radius: 8px;
  border-left: 3px solid var(--gold-accent);
  transition: var(--transition-smooth);
  display: flex;
  align-items: flex-start;
  gap: 15px;
}

.bible-verse-row:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  transform: translateX(5px);
  box-shadow: var(--shadow-light);
}

.chapter-navigation {
  background: rgba(255, 255, 255, 0.08) !important;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  margin: 20px 0;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-light);
}

.page-header {
  background: rgba(255, 255, 255, 0.1) !important;
  padding: 20px;
  margin-bottom: 20px;
  border-radius: var(--border-radius);
  text-align: center;
}

#bible-container {
  background: transparent !important;
  padding: 20px 0;
}

/* S'assurer que le texte reste lisible */
.bible-verse-text,
.chapter-info h2,
.chapter-info p,
.chapter-navigation button,
.page-header h1 {
  color: #333 !important;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8) !important;
}

.bible-verse-number {
  color: #e8b923 !important;
  font-weight: bold !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8) !important;
  min-width: 40px;
  text-align: center;
  font-size: 1.1em;
}

.bible-verse-reference {
  color: #1976d2 !important;
  font-weight: 600 !important;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8) !important;
}

/* Styles pour les éléments de verset */
.bible-verse-num {
  color: var(--gold-accent) !important;
  font-weight: bold !important;
  font-size: 1.1em !important;
  min-width: 40px !important;
  text-align: center !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8) !important;
}

.bible-verse-text {
  flex: 1 !important;
  line-height: 1.8 !important;
  color: #333 !important;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8) !important;
  font-size: var(--bible-font-size) !important;
}

.bible-verse-actions {
  display: flex !important;
  gap: 8px !important;
  margin-top: 10px !important;
  flex-wrap: wrap !important;
}

.bible-verse-actions button {
  background: linear-gradient(135deg, #050a14 0%, #0d1421 50%, #1a237e 100%) !important;
  border: 1px solid rgba(232, 185, 35, 0.3) !important;
  border-radius: 50% !important;
  width: 35px !important;
  height: 35px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: var(--transition-smooth) !important;
  color: #bbdefb !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

.bible-verse-actions button:hover {
  background: linear-gradient(135deg, #e8b923 0%, #ffd700 50%, #ffed4e 100%) !important;
  border-color: #e8b923 !important;
  transform: translateY(-2px) scale(1.05) !important;
  box-shadow: 0 6px 15px rgba(232, 185, 35, 0.4), 0 2px 4px rgba(0, 0, 0, 0.4) !important;
}

/* Styles pour la navigation des chapitres */
.nav-btn {
  background: linear-gradient(135deg, #050a14 0%, #0d1421 50%, #1a237e 100%) !important;
  border: 1px solid rgba(232, 185, 35, 0.3) !important;
  border-radius: var(--border-radius) !important;
  padding: 12px 20px !important;
  color: #bbdefb !important;
  cursor: pointer !important;
  transition: var(--transition-smooth) !important;
  font-weight: 600 !important;
  box-shadow: var(--shadow-light) !important;
}

.nav-btn:hover {
  background: linear-gradient(135deg, #e8b923 0%, #ffd700 50%, #ffed4e 100%) !important;
  border-color: #e8b923 !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-gold) !important;
  color: #333 !important;
}

.chapter-info {
  text-align: center !important;
  flex: 1 !important;
  margin: 0 20px !important;
}

.chapter-info h2 {
  color: var(--gold-accent) !important;
  font-size: 1.5em !important;
  margin: 0 0 5px 0 !important;
  font-weight: 700 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8) !important;
}

.chapter-info p {
  color: #bbdefb !important;
  font-size: 1.1em !important;
  margin: 0 !important;
  font-weight: 500 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8) !important;
}

/* Styles pour le mode nuit */
body.night-mode .bible-container {
  background: rgba(0, 0, 0, 0.3) !important;
}

body.night-mode .bible-verse-row {
  background: rgba(0, 0, 0, 0.2) !important;
  border-left-color: var(--gold-accent) !important;
}

body.night-mode .bible-verse-text {
  color: #e0e0e0 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8) !important;
}

body.night-mode .bible-verse-num {
  color: var(--gold-accent) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8) !important;
}

body.night-mode .chapter-navigation {
  background: rgba(0, 0, 0, 0.3) !important;
}

body.night-mode .chapter-info h2 {
  color: var(--gold-accent) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8) !important;
}

body.night-mode .chapter-info p {
  color: #bbdefb !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8) !important;
}

/* Styles responsives pour la lecture biblique */
@media (max-width: 767px) {
  .bible-container {
    margin: 10px !important;
    padding: 15px !important;
  }
  
  .bible-verse-row {
    padding: 12px !important;
    gap: 10px !important;
  }
  
  .bible-verse-actions {
    gap: 6px !important;
  }
  
  .bible-verse-actions button {
    width: 30px !important;
    height: 30px !important;
  }
  
  .chapter-navigation {
    flex-direction: column !important;
    gap: 15px !important;
    padding: 15px !important;
  }
  
  .nav-btn {
    padding: 10px 15px !important;
    font-size: 0.9em !important;
  }
  
  .chapter-info {
    margin: 0 !important;
  }
  
  .chapter-info h2 {
    font-size: 1.3em !important;
  }
  
  .chapter-info p {
    font-size: 1em !important;
  }
}

/* Styles pour les éléments de sélection et surlignage */
.bible-verse-selection {
  background: rgba(232, 185, 35, 0.1) !important;
  border: 2px solid var(--gold-accent) !important;
  border-radius: 8px !important;
  padding: 10px !important;
  margin: 5px 0 !important;
}

.highlight-yellow { background-color: rgba(255, 235, 59, 0.3) !important; }
.highlight-orange { background-color: rgba(255, 152, 0, 0.3) !important; }
.highlight-green { background-color: rgba(76, 175, 80, 0.3) !important; }
.highlight-blue { background-color: rgba(33, 150, 243, 0.3) !important; }
.highlight-purple { background-color: rgba(156, 39, 176, 0.3) !important; }
.highlight-red { background-color: rgba(244, 67, 54, 0.3) !important; }

/* Styles pour les menus contextuels */
.highlight-menu {
  position: fixed !important;
  background: rgba(255, 255, 255, 0.95) !important;
  border: 1px solid var(--gold-accent) !important;
  border-radius: var(--border-radius) !important;
  box-shadow: var(--shadow-heavy) !important;
  z-index: 1000 !important;
  display: none !important;
  backdrop-filter: blur(10px) !important;
}

.highlight-menu.show {
  display: block !important;
}

.highlight-colors {
  display: flex !important;
  gap: 8px !important;
  padding: 10px !important;
  flex-wrap: wrap !important;
}

.color-btn {
  width: 30px !important;
  height: 30px !important;
  border: 2px solid transparent !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  transition: var(--transition-smooth) !important;
}

.color-btn:hover {
  transform: scale(1.1) !important;
  border-color: #333 !important;
}

.color-preview {
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
}

/* Styles pour les boutons flottants */
#floating-actions {
  position: fixed !important;
  bottom: 20px !important;
  right: 20px !important;
  z-index: 1000 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

.floating-btn {
  width: 50px !important;
  height: 50px !important;
  border-radius: 50% !important;
  border: none !important;
  background: linear-gradient(135deg, #050a14 0%, #0d1421 50%, #1a237e 100%) !important;
  color: #bbdefb !important;
  cursor: pointer !important;
  transition: var(--transition-smooth) !important;
  box-shadow: var(--shadow-medium) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.2em !important;
}

.floating-btn:hover {
  background: linear-gradient(135deg, #e8b923 0%, #ffd700 50%, #ffed4e 100%) !important;
  transform: translateY(-3px) scale(1.1) !important;
  box-shadow: var(--shadow-gold) !important;
  color: #333 !important;
}

/* Styles pour le compteur de sélection */
#selection-counter {
  position: fixed !important;
  top: 20px !important;
  left: 20px !important;
  background: rgba(255, 255, 255, 0.9) !important;
  padding: 10px 15px !important;
  border-radius: var(--border-radius) !important;
  box-shadow: var(--shadow-light) !important;
  z-index: 1000 !important;
  display: none !important;
  font-weight: 600 !important;
  color: #333 !important;
}

#clear-selections-btn {
  position: fixed !important;
  top: 20px !important;
  left: 200px !important;
  background: linear-gradient(135deg, #f44336 0%, #d32f2f 100%) !important;
  border: none !important;
  border-radius: 50% !important;
  width: 40px !important;
  height: 40px !important;
  color: white !important;
  cursor: pointer !important;
  transition: var(--transition-smooth) !important;
  box-shadow: var(--shadow-light) !important;
  z-index: 1000 !important;
  display: none !important;
}

#clear-selections-btn:hover {
  transform: scale(1.1) !important;
  box-shadow: 0 4px 15px rgba(244, 67, 54, 0.4) !important;
}

/* ===== STYLES POUR LE VERSET DU JOUR - DESIGN SACRÉ ===== */
.verse-section {
  margin: 50px auto;
  max-width: 900px;
  padding: 30px;
  position: relative;
}

.verse-card {
  background: #ffffff;
  border-radius: 20px;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
  padding: 50px 40px;
  position: relative;
  overflow: hidden;
  border: 3px solid var(--gold-accent);
}

.verse-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, var(--gold-accent), #e6c200);
  background-size: 300% 300%;
  animation: holyGlow 8s ease-in-out infinite;
  border-radius: 20px;
  z-index: -1;
  margin: -3px;
  opacity: 0.1;
}

@keyframes holyGlow {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.verse-card::after {
  content: '+';
  position: absolute;
  top: -20px;
  right: -20px;
  font-size: 120px;
  color: var(--gold-accent);
  font-family: serif;
  transform: rotate(15deg);
  z-index: 0;
  font-weight: bold;
  opacity: 0.1;
}

.verse-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 35px;
  flex-wrap: wrap;
  gap: 20px;
  position: relative;
  z-index: 1;
}

.verse-badge {
  background: linear-gradient(135deg, var(--gold-accent), #d4af37);
  color: white;
  padding: 12px 24px;
  border-radius: 25px;
  font-weight: 700;
  font-size: 1em;
  box-shadow: 0 8px 25px rgba(232, 185, 35, 0.4);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  position: relative;
  overflow: hidden;
}

.verse-badge::before {
  content: '📖';
  margin-right: 8px;
  font-size: 1.2em;
}

.verse-reference {
  background: linear-gradient(135deg, #2c3e50, #34495e);
  color: white;
  padding: 12px 24px;
  border-radius: 25px;
  font-weight: 600;
  font-size: 1.1em;
  box-shadow: 0 8px 25px rgba(44, 62, 80, 0.4);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  font-family: 'Cinzel', serif;
  letter-spacing: 1px;
}

.verse-text {
  font-size: 1.8em;
  line-height: 2.2;
  color: #1a1a1a;
  text-align: center;
  margin: 40px 0;
  padding: 40px 30px;
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.9) 0%, 
    rgba(248, 250, 252, 0.8) 100%);
  border-radius: 25px;
  border: 3px solid var(--gold-accent);
  position: relative;
  font-style: italic;
  font-weight: 400;
  box-shadow: 
    0 15px 35px rgba(0, 0, 0, 0.1),
    inset 0 2px 0 rgba(255, 255, 255, 0.8);
  z-index: 1;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.verse-text::before {
  content: '"';
  position: absolute;
  top: -15px;
  left: 30px;
  font-size: 120px;
  color: var(--gold-accent);
  opacity: 0.15;
  font-family: serif;
  font-weight: bold;
  line-height: 1;
}

.verse-text::after {
  content: '"';
  position: absolute;
  bottom: -60px;
  right: 30px;
  font-size: 120px;
  color: var(--gold-accent);
  opacity: 0.15;
  font-family: serif;
  font-weight: bold;
  line-height: 1;
}

.verse-details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  margin: 40px 0;
  position: relative;
  z-index: 1;
}

.verse-detail {
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.95) 0%, 
    rgba(248, 250, 252, 0.9) 100%);
  padding: 30px;
  border-radius: 20px;
  border: 2px solid rgba(232, 185, 35, 0.2);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
}

.verse-detail::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, var(--gold-accent), #e6c200);
}

.verse-detail:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
  border-color: var(--gold-accent);
}

.verse-detail h4 {
  color: #2c3e50;
  font-size: 1.2em;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
  font-family: 'Cinzel', serif;
  letter-spacing: 0.5px;
}

.verse-detail h4 i {
  color: var(--gold-accent);
  font-size: 1.4em;
  text-shadow: 0 2px 4px rgba(232, 185, 35, 0.3);
}

.verse-detail p {
  color: #4a5568;
  line-height: 1.8;
  margin: 0;
  font-size: 1em;
  font-weight: 400;
}

.verse-actions {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 40px;
  padding-top: 30px;
  border-top: 2px solid rgba(232, 185, 35, 0.2);
  position: relative;
  z-index: 1;
}

.verse-action-btn {
  background: linear-gradient(135deg, #f8f9fa, #e9ecef);
  border: 2px solid rgba(232, 185, 35, 0.3);
  color: #495057;
  padding: 15px 25px;
  border-radius: 25px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.95em;
  text-decoration: none;
  position: relative;
  overflow: hidden;
}

.verse-action-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left 0.5s ease;
}

.verse-action-btn:hover::before {
  left: 100%;
}

.verse-action-btn:hover {
  background: linear-gradient(135deg, var(--gold-accent), #e6c200);
  color: white;
  border-color: var(--gold-accent);
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(232, 185, 35, 0.4);
}

.verse-action-btn.primary {
  background: linear-gradient(135deg, #2c3e50, #34495e);
  color: white;
  border-color: #2c3e50;
  box-shadow: 0 8px 25px rgba(44, 62, 80, 0.3);
}

.verse-action-btn.primary:hover {
  background: linear-gradient(135deg, #34495e, #2c3e50);
  box-shadow: 0 12px 30px rgba(44, 62, 80, 0.5);
}

.loading {
  display: inline-block;
  width: 24px;
  height: 24px;
  border: 3px solid rgba(232, 185, 35, 0.3);
  border-radius: 50%;
  border-top-color: var(--gold-accent);
  animation: holySpin 1.5s linear infinite;
}

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

/* Animations sacrées */
@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.8) translateY(50px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

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

/* Mode sombre sacré */
body.night-mode .verse-card {
  background: linear-gradient(145deg, 
    rgba(30, 30, 30, 0.98) 0%, 
    rgba(45, 45, 45, 0.95) 100%);
}

body.night-mode .verse-text {
  background: linear-gradient(135deg, 
    rgba(40, 40, 40, 0.9) 0%, 
    rgba(55, 55, 55, 0.8) 100%);
  color: #f0f0f0;
  border-color: var(--gold-accent);
}

body.night-mode .verse-detail {
  background: linear-gradient(135deg, 
    rgba(35, 35, 35, 0.95) 0%, 
    rgba(50, 50, 50, 0.9) 100%);
  border-color: rgba(232, 185, 35, 0.3);
}

body.night-mode .verse-detail h4 {
  color: #f0f0f0;
}

body.night-mode .verse-detail p {
  color: #d0d0d0;
}

body.night-mode .verse-action-btn {
  background: linear-gradient(135deg, #404040, #505050);
  color: #f0f0f0;
  border-color: rgba(232, 185, 35, 0.4);
}

body.night-mode .verse-reference {
  background: linear-gradient(135deg, #1a1a1a, #2a2a2a);
  color: #f0f0f0;
}

/* Responsive design sacré */
@media (max-width: 768px) {
  .verse-section {
    margin: 30px auto;
    padding: 20px;
  }
  
  .verse-card {
    padding: 30px 25px;
  }
  
  .verse-header {
    flex-direction: column;
    text-align: center;
    gap: 15px;
  }
  
  .verse-text {
    font-size: 1.4em;
    padding: 25px 20px;
    margin: 30px 0;
  }
  
  .verse-text::before,
  .verse-text::after {
    font-size: 80px;
  }
  
  .verse-details {
    grid-template-columns: 1fr;
    gap: 25px;
  }
  
  .verse-actions {
    flex-direction: column;
    align-items: center;
  }
  
  .verse-action-btn {
    width: 100%;
    max-width: 280px;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .verse-card {
    padding: 25px 20px;
  }
  
  .verse-text {
    font-size: 1.2em;
    padding: 20px 15px;
  }
  
  .verse-text::before,
  .verse-text::after {
    font-size: 60px;
  }
}

/* ===== STYLES EXTRAITS DU HTML - ARCHITECTURE PROPRE ===== */

/* Reset et base pour la page d'accueil */
.home-page * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Force l'application des styles pour la page d'accueil */
.home-page {
  all: unset;
  font-family: 'Inter', sans-serif !important;
  min-height: 100vh !important;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 25%, #f093fb 50%, #f5576c 75%, #4facfe 100%) !important;
  background-size: 400% 400% !important;
  animation: gradientShift 15s ease infinite !important;
  color: #000000 !important;
  overflow-x: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
}


@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Animations générales */
@keyframes float {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-20px) rotate(5deg); }
}

@keyframes glow {
  0%, 100% { box-shadow: 0 0 20px rgba(74, 144, 226, 0.3); }
  50% { box-shadow: 0 0 40px rgba(74, 144, 226, 0.6), 0 0 60px rgba(74, 144, 226, 0.4); }
}

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

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

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

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

/* Particules flottantes */
.home-page .floating-particles {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.particle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: rgba(74, 144, 226, 0.6);
  border-radius: 50%;
  animation: float 6s infinite ease-in-out;
}

.particle:nth-child(1) { top: 20%; left: 10%; animation-delay: 0s; }
.particle:nth-child(2) { top: 60%; left: 80%; animation-delay: 2s; }
.particle:nth-child(3) { top: 40%; left: 60%; animation-delay: 4s; }
.particle:nth-child(4) { top: 80%; left: 20%; animation-delay: 1s; }
.particle:nth-child(5) { top: 30%; left: 90%; animation-delay: 3s; }

/* Header principal */
.home-page .hero {
  position: relative;
  z-index: 10;
  max-width: 1200px;
  margin: 0 auto;
  padding: 120px 20px 60px;
  text-align: center;
  animation: slideInUp 1s ease-out;
}

.home-page .hero h1 {
  font-family: 'Cinzel', serif;
  font-size: clamp(3rem, 8vw, 5rem);
  margin-bottom: 20px;
  background: linear-gradient(135deg, #FFD700 0%, #FFA500 25%, #FFD700 50%, #FF8C00 75%, #FFD700 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 3s ease-in-out infinite, glow 2s ease-in-out infinite;
  text-shadow: 0 0 30px rgba(255, 255, 255, 0.8);
}

.hero .subtitle {
  font-size: clamp(1.2rem, 3vw, 1.8rem);
  color: #000000;
  margin-bottom: 30px;
  font-weight: 300;
  letter-spacing: 1px;
}

.hero .description {
  font-size: clamp(1rem, 2.5vw, 1.3rem);
  color: rgba(0, 0, 0, 0.8);
  margin-bottom: 50px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}

/* Boutons d'action principaux */
.main-actions {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 80px;
}

.main-btn {
  background: linear-gradient(135deg, #4A90E2 0%, #87CEEB 100%);
  color: #000000;
  padding: 18px 35px;
  border-radius: 50px;
  text-decoration: none;
  font-weight: 700;
  font-size: 1.1rem;
  transition: all 0.3s ease;
  box-shadow: 0 8px 25px rgba(74, 144, 226, 0.3);
  position: relative;
  overflow: hidden;
  animation: fadeInScale 0.8s ease-out;
}

.main-btn:hover {
  transform: translateY(-5px) scale(1.05);
  box-shadow: 0 15px 40px rgba(74, 144, 226, 0.5);
  animation: pulse 0.6s ease-in-out;
}

.main-btn:active,
.main-btn:focus {
  background: rgba(255, 255, 255, 0.9);
  color: #000000;
  transform: translateY(-2px) scale(1.02);
}

.main-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left 0.5s;
}

.main-btn:hover::before {
  left: 100%;
}

/* Section fonctionnalités */
.features-section {
  max-width: 1200px;
  margin: 0 auto 60px;
  padding: 0 20px;
  animation: slideInUp 1s ease-out 0.6s both;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 30px;
}

.feature-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
  backdrop-filter: blur(20px);
  border: 3px solid;
  border-radius: 20px;
  padding: 30px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.feature-card:nth-child(1) { border-color: #ff6b6b; }
.feature-card:nth-child(2) { border-color: #4ecdc4; }
.feature-card:nth-child(3) { border-color: #45b7d1; }
.feature-card:nth-child(4) { border-color: #96ceb4; }
.feature-card:nth-child(5) { border-color: #feca57; }
.feature-card:nth-child(6) { border-color: #ff9ff3; }

.feature-card:hover {
  transform: translateY(-10px) scale(1.02);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.8) 100%);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2);
}

.feature-card:active,
.feature-card:focus,
.feature-card.clicked {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%) !important;
  color: #000000 !important;
  transform: translateY(-5px) scale(1.01) !important;
}

.feature-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #4A90E2, #87CEEB, #4A90E2);
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.feature-card:hover::before {
  transform: scaleX(1);
}

.feature-icon {
  font-size: 3rem;
  margin-bottom: 20px;
}

.feature-card:nth-child(1) .feature-icon { color: #ff6b6b; }
.feature-card:nth-child(2) .feature-icon { color: #4ecdc4; }
.feature-card:nth-child(3) .feature-icon { color: #45b7d1; }
.feature-card:nth-child(4) .feature-icon { color: #96ceb4; }
.feature-card:nth-child(5) .feature-icon { color: #feca57; }
.feature-card:nth-child(6) .feature-icon { color: #ff9ff3; }

.feature-title {
  font-family: 'Cinzel', serif;
  font-size: 1.5rem;
  color: #000000;
  margin-bottom: 15px;
  font-weight: 600;
}

.feature-description {
  color: rgba(0, 0, 0, 0.8);
  line-height: 1.6;
  margin-bottom: 20px;
}

.feature-btn {
  background: linear-gradient(135deg, rgba(74, 144, 226, 0.2), rgba(135, 206, 235, 0.2));
  color: #4A90E2;
  border: 2px solid rgba(74, 144, 226, 0.3);
  padding: 12px 25px;
  border-radius: 25px;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
  display: inline-block;
}

.feature-btn:hover {
  background: linear-gradient(135deg, rgba(74, 144, 226, 0.8), rgba(135, 206, 235, 0.8));
  color: #000000;
  transform: translateY(-2px);
}

.feature-btn:active,
.feature-btn:focus {
  background: rgba(255, 255, 255, 0.9);
  color: #000000;
  border-color: rgba(0, 0, 0, 0.3);
  transform: translateY(0px);
}

/* Boutons rapides */
.quick-actions {
  max-width: 1000px;
  margin: 0 auto 60px;
  padding: 0 20px;
  animation: slideInUp 1s ease-out 0.9s both;
}

.quick-actions h3 {
  text-align: center;
  font-family: 'Cinzel', serif;
  font-size: 2rem;
  color: #4A90E2;
  margin-bottom: 30px;
  text-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
}

.quick-buttons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

.quick-btn {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
  backdrop-filter: blur(15px);
  border: 3px solid;
  border-radius: 15px;
  padding: 20px;
  text-decoration: none;
  color: #000000;
  text-align: center;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.quick-btn:nth-child(1) { border-color: #ff6b6b; }
.quick-btn:nth-child(2) { border-color: #4ecdc4; }
.quick-btn:nth-child(3) { border-color: #45b7d1; }
.quick-btn:nth-child(4) { border-color: #96ceb4; }
.quick-btn:nth-child(5) { border-color: #feca57; }
.quick-btn:nth-child(6) { border-color: #ff9ff3; }

.quick-btn:hover {
  transform: translateY(-5px);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.8) 100%);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.quick-btn:active,
.quick-btn:focus {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
  color: #000000;
  transform: translateY(-2px);
}

.quick-btn i {
  font-size: 2rem;
  margin-bottom: 10px;
  display: block;
}

.quick-btn:nth-child(1) i { color: #ff6b6b; }
.quick-btn:nth-child(2) i { color: #4ecdc4; }
.quick-btn:nth-child(3) i { color: #45b7d1; }
.quick-btn:nth-child(4) i { color: #96ceb4; }
.quick-btn:nth-child(5) i { color: #feca57; }
.quick-btn:nth-child(6) i { color: #ff9ff3; }

.quick-btn span {
  font-weight: 600;
  font-size: 1.1rem;
}

/* Footer */
.footer {
  text-align: center;
  padding: 40px 20px;
  color: rgba(0, 0, 0, 0.7);
  border-top: 1px solid rgba(74, 144, 226, 0.2);
  margin-top: 60px;
  position: relative;
}

/* Bouton croix chrétienne */
.contact-toggle-btn {
  position: fixed !important;
  bottom: 30px !important;
  right: 30px !important;
  width: 80px !important;
  height: 80px !important;
  background: linear-gradient(135deg, #ff6b6b, #ff8e8e) !important;
  border: 4px solid #ffffff !important;
  border-radius: 50% !important;
  color: #ffffff !important;
  font-size: 2rem !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 10px 30px rgba(255, 107, 107, 0.5) !important;
  z-index: 10002 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.contact-toggle-btn:hover {
  transform: translateY(-5px) scale(1.1);
  box-shadow: 0 15px 40px rgba(74, 144, 226, 0.5);
  background: linear-gradient(135deg, #3a7bc8, #6bb6d6);
}

.contact-toggle-btn:active {
  transform: translateY(-2px) scale(1.05);
  background: rgba(255, 255, 255, 0.9);
  color: #000000;
}

/* Section contact */
.contact-section {
  position: fixed;
  bottom: 120px;
  right: 30px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  border: 3px solid #4A90E2;
  border-radius: 20px;
  padding: 0;
  max-width: 400px;
  width: 90vw;
  transform: translateY(100px) scale(0.8);
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s ease;
  z-index: 10001;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.contact-section.show {
  transform: translateY(0) scale(1) !important;
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
}

.contact-content {
  padding: 30px;
}

.contact-content h3 {
  font-family: 'Cinzel', serif;
  font-size: 1.5rem;
  color: #4A90E2;
  margin-bottom: 15px;
  text-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
}

.contact-content p {
  color: rgba(0, 0, 0, 0.9);
  margin-bottom: 25px;
  line-height: 1.6;
}

.contact-info {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.contact-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  transition: all 0.3s ease;
}

.contact-item:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateX(5px);
}

.contact-item i {
  color: #4A90E2;
  font-size: 1.2rem;
  width: 20px;
  text-align: center;
}

.contact-item a {
  color: #000000;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s ease;
}

.contact-item a:hover {
  color: #87CEEB;
}

/* Classes pour les états actifs */
.feature-card.active {
  background: rgba(255, 255, 255, 0.95) !important;
  color: #000000 !important;
  transform: translateY(-5px) scale(1.01) !important;
  border: 3px solid #ff6b6b !important;
}

.verse-detail.active {
  background: rgba(255, 255, 255, 0.95) !important;
  color: #000000 !important;
  transform: translateY(-2px) !important;
  border: 3px solid #ff6b6b !important;
}

.quick-btn.active {
  background: rgba(255, 255, 255, 0.95) !important;
  color: #000000 !important;
  transform: translateY(-2px) !important;
  border: 3px solid #ff6b6b !important;
}

/* Responsive */
@media (max-width: 768px) {
  .main-actions {
    flex-direction: column;
    align-items: center;
  }
  
  .main-btn {
    width: 100%;
    max-width: 300px;
  }
  
  .verse-details {
    grid-template-columns: 1fr;
  }
  
  .features-grid {
    grid-template-columns: 1fr;
  }
  
  .quick-buttons {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Bouton contact mobile */
  .contact-toggle-btn {
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    font-size: 1.2rem;
  }

  /* Section contact mobile */
  .contact-section {
    bottom: 80px;
    right: 20px;
    left: 20px;
    width: auto;
    max-width: none;
  }
}

/* Loading animation */
.loading {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 3px solid rgba(74, 144, 226, 0.3);
  border-radius: 50%;
  border-top-color: #4A90E2;
  animation: spin 1s ease-in-out infinite;
}