:root {
          --primary-color: #D6A300;
          --secondary-color: #111111;
          --success-color: #198754;
          --white: #ffffff;
          --light-gray: #f8f9fa;
          --shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
          --shadow-hover: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
          --border-radius: 0.375rem;
        }

        body {
          font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
          line-height: 1.6;
        }

        .books-section {
          padding: 5rem 0;
          background: linear-gradient(135deg, #ccae02 0%, #e9ecef 100%);
        }

        .section-header {
          max-width: 600px;
          margin: 0 auto 3rem;
          text-align: center;
          
        }

        .section-badge {
          display: inline-block;
          background: var(--secondary-color);
          color: var(--white);
          padding: 0.5rem 1.5rem;
          border-radius: 50px;
          font-weight: 600;
          font-size: 0.875rem;
          text-transform: uppercase;
          letter-spacing: 0.5px;
          margin-bottom: 1rem;
          
        }

        .section-title {
          font-size: 2.5rem;
          font-weight: 700;
          color: var(--secondary-color);
          margin-bottom: 1rem;
        }

        .section-subtitle {
          font-family: 'Georgia', serif;
          font-size: 1.2rem;
          line-height: 1.6;
          text-align: center;
          color: #333;
          padding: 2rem;
          position: relative;
          max-width: 800px;
          margin: 0 auto;
        }

        .section-subtitle::before {
          content: '"';
          font-size: 4rem;
          color: #D6A300;
          position: absolute;
          top: -0.5rem;
          left: 1rem;
          opacity: 0.3;
          font-family: 'Georgia', serif;
        }

        .section-subtitle::after {
          content: '"';
          font-size: 4rem;
          color: #D6A300;
          position: absolute;
          bottom: -2rem;
          right: 1rem;
          opacity: 0.3;
          font-family: 'Georgia', serif;
        }

        .search-container {
          max-width: 500px;
          margin: 0 auto 3rem;
          position: relative;
          
        }

        .search-input {
          width: 100%;
          padding: 1rem 1.5rem 1rem 4rem;
          border: 2px solid #e9ecef;
          background-color: #111111;
          border-radius: 50px;
          font-size: 1rem;
          transition: all 0.3s ease;
          box-shadow: var(--shadow);
          color: rgb(255, 255, 255);
          font-style: oblique;
        }

        .search-input:focus {
          outline: none;
          border-color: var(--primary-color);
          box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
        }

        .search-icon {
          position: absolute;
          left: 1.5rem;
          top: 50%;
          transform: translateY(-50%);
          color: #6c757d;
          font-size: 1.125rem;
        }

        .search-btn {
          position: absolute;
          right: 0.25rem;
          top: 50%;
          transform: translateY(-50%);
          width: 3rem;
          height: 3rem;
          border-radius: 50%;
          border: none;
          background: var(--primary-color);
          color: var(--white);
          display: flex;
          align-items: center;
          justify-content: center;
          transition: all 0.3s ease;
        }

        .search-btn:hover {
          background: #bea202;
          transform: translateY(-50%) scale(1.05);
        }

.books-grid {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 24px;
    padding: 16px;
    overflow-x: hidden;
    scroll-behavior: smooth;
    scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch; /* iOS */

  /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: #888 transparent;
    width: auto; /* ne pas fixer la largeur ici */
    margin: 0 auto; /* centre la grille dans son conteneur parent */
    max-width: 100%; /* éviter le débordement */
}


/* Chrome, Edge, Safari */
.books-grid::-webkit-scrollbar {
  height: 6px;
}

.books-grid::-webkit-scrollbar-track {
  background: transparent;
}

.books-grid::-webkit-scrollbar-thumb {
  background-color: rgba(136, 136, 136, 0.6);
  border-radius: 3px;
}

.books-grid::-webkit-scrollbar-thumb:hover {
  background-color: rgba(136, 136, 136, 0.9);
}




        .book-card {
          min-width: 220px;
          max-width: 220px;
          min-height: 370px;
          max-height: 370px;
          flex: 0 0 220px;
          background: #fff;
          border-radius: 12px;
          box-shadow: 0 2px 8px rgba(0,0,0,0.07);
          display: flex;
          flex-direction: column;
          align-items: center;
          padding: 16px 12px;
          box-sizing: border-box;
          overflow: hidden;
          transition: all 0.3s ease;
        }

        .book-card::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          height: 4px;
          background: linear-gradient(90deg, var(--primary-color), var(--success-color));
          transform: scaleX(0);
          transition: transform 0.3s ease;
        }

        .book-card:hover {
          transform: translateY(-8px);
          box-shadow: var(--shadow-hover);
        }

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

        .book-image {
          width: 100%;
          height: 180px;
          object-fit: cover;
          border-radius: 8px;
          margin-bottom: 12px;
          transition: transform 0.3s ease;
        }

        .book-card:hover .book-image {
          transform: scale(1.05);
        }

        .book-title {
          font-size: 1.125rem;
          font-weight: 600;
          color: var(--secondary-color);
          margin-bottom: 0.75rem;
          line-height: 1.4;
          flex-grow: 1;
        }

        .book-author {
          color: #7d6c6c;
          font-size: 0.875rem;
          margin-bottom: 1.5rem;
          font-style: italic;
        }

        .book-link {
          display: inline-flex;
          align-items: center;
          gap: 0.5rem;
          padding: 0.75rem 2rem;
          background: transparent;
          color: var(--success-color);
          border: 2px solid var(--success-color);
          border-radius: 50px;
          text-decoration: none;
          font-weight: 500;
          transition: all 0.3s ease;
          margin-top: auto;
        }

        .book-link:hover {
          background: var(--success-color);
          color: var(--white);
          transform: translateY(-2px);
        }

        .loading-skeleton {
          animation: pulse 1.5s ease-in-out infinite;
        }

        @keyframes pulse {
          0% {
            opacity: 1;
          }

          50% {
            opacity: 0.5;
          }

          100% {
            opacity: 1;
          }
        }

        .no-results {
          text-align: center;
          padding: 3rem;
          color: #6c757d;
          grid-column: 1 / -1;
        }

        .no-results i {
          font-size: 4rem;
          margin-bottom: 1rem;
          opacity: 0.5;
        }

        @media (max-width: 768px) {
          .books-section {
            padding: 3rem 0;
          }

          .section-title {
            font-size: 2rem;
          }

          .books-grid {
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 1.5rem;
          }

          .search-container {
            margin: 0 1rem 2rem;
          }
        }

        /* Style amélioré pour la citation biblique */
        .section-subtitle {
          font-family: 'Georgia', serif;
          font-size: 1.2rem;
          line-height: 1.6;
          text-align: center;
          color: #333;
          padding: 2rem;
          position: relative;
          max-width: 800px;
          margin: 0 auto;
        }

        .section-subtitle::before {
          content: '"';
          font-size: 4rem;
          color: #057922;
          position: absolute;
          top: -0.5rem;
          left: 1rem;
          opacity: 0.9;
          font-family: 'Georgia', serif;
        }

        .section-subtitle::after {
          content: '"';
          font-size: 4rem;
          color: #057922;
          position: absolute;
          bottom: -2rem;
          right: 1rem;
          opacity: 0.9;
          font-family: 'Georgia', serif;
        }

        .verse-reference {
          display: inline-block;
          font-style: italic;
          color: #057922;
          margin-top: 1rem;
          font-size: 0.9em;
          position: relative;
          padding: 0.5rem 1.5rem;
        }

        .verse-reference::before,
        .verse-reference::after {
          content: '';
          position: absolute;
          height: 2px;
          width: 30px;
          background: #ffffff;
          top: 50%;
          opacity: 0.9;
        }

        .verse-reference::before {
          left: -20px;
        }

        .verse-reference::after {
          right: -20px;
        }

        /* === FOOTER CUSTOM DESIGN === */
.footer-custom {
    background: linear-gradient(135deg, #181d2f 0%, #232946 100%);
    color: #e0e0e0;
    border-top-left-radius: 40px;
    border-top-right-radius: 40px;
    box-shadow: 0 -4px 32px 0 rgba(0,0,0,0.12);
    position: relative;
    overflow: hidden;
}
.footer-logo-box {
    background: rgba(255,255,255,0.03);
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.08);
    text-align: center;
}
.footer-box {
    background: rgba(255,255,255,0.02);
    box-shadow: 0 1px 8px 0 rgba(0,0,0,0.06);
}
.footer-link {
    display: block;
    color: #e0e0e0;
    text-decoration: none;
    margin-bottom: 8px;
    font-weight: 500;
    transition: color 0.2s, padding-left 0.2s;
    padding-left: 0;
}
.footer-link:hover {
    color: #F9E61F;
    padding-left: 8px;
}
.btn-social {
    background: #232946;
    color: #F9E61F;
    border-radius: 50%;
    font-size: 1.2rem;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 6px;
    transition: background 0.2s, color 0.2s, box-shadow 0.2s;
    box-shadow: 0 2px 8px 0 rgba(0,0,0,0.10);
}
.btn-social:hover {
    background: #F9E61F;
    color: #232946;
}
.btn-gradient-footer {
    background: linear-gradient(90deg, #b18306 0%, #b18306 100%);
    color: #fff;
    border: none;
    font-weight: 600;
    box-shadow: 0 2px 8px 0 rgba(0,0,0,0.10);
}
.btn-gradient-footer:hover {
    background: linear-gradient(90deg, #b18306 0%, #b18306 100%);
    color: #fff;
}
.footer-separator {
    border-top: 2px solid #fff;
    opacity: 0.08;
    margin: 0 0 24px 0;
}
.footer-brand {
    font-weight: 700;
    letter-spacing: 1px;
    text-decoration: none;
}
@media (max-width: 991px) {
    .footer-custom {
        border-radius: 0;
    }
    .footer-logo-box, .footer-box {
        margin-bottom: 24px;
    }
}

/* === FOOTER GLASSMORPHISM DESIGN === */
.footer-glass {
    background: linear-gradient(120deg, #f9fafc 0%, #e3e6f3 100%);
    border-top-left-radius: 40px;
    border-top-right-radius: 40px;
    box-shadow: 0 -4px 32px 0 rgba(0, 0, 0, 0.7);
    overflow: hidden;
    position: relative;
    z-index: 2;
}
.footer-top-separator {
    width: 100%;
    height: 8px;
    background: linear-gradient(90deg, #b88d02 0%, #b88d02 50%, #b88d02 100%);
    opacity: 0.7;
    margin-bottom: 16px;
}
.footer-glass-box {
    background: rgba(255,255,255,0.55);
    box-shadow: 0 4px 24px 0 rgba(34,41,68,0.08);
    border-radius: 24px;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(200,200,200,0.18);
    transition: box-shadow 0.2s;
}
.footer-glass-box:hover {
    box-shadow: 0 8px 32px 0 rgba(34,41,68,0.16);
}
.footer-title {
    color: #232946;
    font-weight: 700;
    letter-spacing: 1px;
}
.footer-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.footer-list li {
    color: #232946;
    margin-bottom: 8px;
    font-size: 1rem;
    display: flex;
    align-items: center;
}
.footer-link-glass {
    color: #232946;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s, padding-left 0.2s;
    padding-left: 0;
}
.footer-link-glass:hover {
    color: #b48401;
    padding-left: 8px;
}
.footer-social {
    background: #fff;
    border-radius: 50%;
    font-size: 1.3rem;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px 0 rgba(34,41,68,0.10);
    margin: 0 4px;
    transition: background 0.2s, color 0.2s, transform 0.2s;
}
.footer-social:hover {
    background: linear-gradient(90deg, #ffffff 0%, #ffffff 100%);
    color: #fff;
    transform: scale(1.1) rotate(-8deg);
}
.btn-glass-gradient {
    background: linear-gradient(90deg, #b88d02 0%, #b88d02 100%);
    color: #fff;
    font-weight: 600;
    border: none;
    box-shadow: 0 2px 8px 0 rgba(34,41,68,0.10);
    transition: background 0.2s;
}
.btn-glass-gradient:hover {
    background: linear-gradient(90deg, #a07b01 0%, #a07b01 100%);
    color: #fff;
}
.footer-bottom-glass {
    background: rgba(255,255,255,0.85);
    border-top: 1px solid #e3e6f3;
    box-shadow: 0 2px 8px 0 rgba(34,41,68,0.04);
    margin-top: 16px;
}
@media (max-width: 991px) {
    .footer-glass {
        border-radius: 0;
    }
    .footer-glass-box {
        margin-bottom: 24px;
    }
}

        .no-books-message {
            text-align: center;
            padding: 60px 40px;
            background: var(--white);
            border-radius: 16px;
            box-shadow: var(--shadow-hover);
            margin: 0 auto;
            max-width: 650px;
            position: relative;
            overflow: hidden;
            animation: slideInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .no-books-message::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, var(--primary-color) 0%, #f4d03f  100%);
        }

        .icon-container {
            position: relative;
            display: inline-block;
            margin-bottom: 30px;
        }

        .icon-container::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 80px;
            height: 80px;
            background: linear-gradient(135deg, var(--primary-color)20, var(--primary-color)40);
            border-radius: 50%;
            z-index: 0;
            animation: pulse 2s infinite;
        }

        .no-books-message i {
            font-size: 48px;
            color: var(--primary-color);
            position: relative;
            z-index: 1;
            filter: drop-shadow(0 2px 4px rgba(214, 163, 0, 0.3));
        }

        .no-books-message h3 {
            font-size: 28px;
            font-weight: 700;
            margin-bottom: 20px;
            color: var(--secondary-color);
            letter-spacing: -0.5px;
            line-height: 1.3;
        }

        .no-books-message p {
            font-size: 18px;
            line-height: 1.7;
            color: #6c757d;
            margin-bottom: 30px;
            max-width: 500px;
            margin-left: auto;
            margin-right: auto;
        }

        .status-indicator {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: linear-gradient(135deg, var(--primary-color)10, var(--primary-color)05);
            color: var(--primary-color);
            padding: 12px 24px;
            border-radius: 50px;
            font-size: 14px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            border: 2px solid var(--primary-color)20;
        }

        .status-indicator i {
            font-size: 14px;
            animation: spin 2s linear infinite;
        }

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

        @keyframes pulse {
            0%, 100% {
                transform: translate(-50%, -50%) scale(1);
                opacity: 0.8;
            }
            50% {
                transform: translate(-50%, -50%) scale(1.1);
                opacity: 0.4;
            }
        }

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

        /* Responsive */
        @media (max-width: 768px) {
            .no-books-message {
                padding: 40px 30px;
                margin: 20px;
            }

            .no-books-message h3 {
                font-size: 24px;
            }

            .no-books-message p {
                font-size: 16px;
            }

            .no-books-message i {
                font-size: 40px;
            }
        }