/* ========================================================================== STYLE.CSS - MENU LATÉRAL MODERNE ========================================================================== */ /* ========================================================================== 1. BASE DE LA PAGE ========================================================================== */ body { /* font-family: Arial, sans-serif; -> Supprimé pour que la police d'origine du html ne soit pas modifiée. */ margin: 0; padding: 0; } /* ========================================================================== 2. BARRE SUPÉRIEURE DES BOUTONS ========================================================================== */ .barre-superieure { position: relative; width: 100%; display: flex; justify-content: center; align-items: center; } /* Groupe des 4 boutons de thème */ .boutons-triples { display: flex; justify-content: center; align-items: center; } /* ========================================================================== 3. BOUTON OUVERTURE DU MENU ========================================================================== */ .open-btn { position: fixed !important; /* Force le maintien en mode fixe au clic */ left: 8px !important; top: 10px !important; z-index: 200000 !important; /* Le met au-dessus de tout, absolument tout */ font-size: 15px; line-height: 1; cursor: pointer; /* --- MODIFICATION TRANSPARENCE --- */ background-color: rgba(44, 62, 80, 0.5) !important; /* Bleu-gris d'origine à 50% d'opacité. Ou modifier le "0.5" à "0.35" ou "0.65" si trop ou pas assez transparent. */ color: rgba(255, 255, 255, 0.8) !important; /* Texte blanc à 80% d'opacité pour rester lisible */ border: 1px solid rgba(255, 255, 255, 0.2); /* Fine bordure blanche transparente pour délimiter le bouton */ /* backdrop-filter: blur(4px); */ /* Floute légèrement le texte biblique qui passe en dessous */ padding: 7px 10px; border-radius: 6px; box-shadow: 0 2px 6px rgba(0,0,0,0.15); /* Ombre adoucie pour le mode transparent */ transition: background-color .25s, color .25s, transform .25s, box-shadow .25s; } /* ON GARDE : Effet au survol de la souris (le bouton redevient opaque pour le confort de clic) */ .open-btn:hover { background-color: rgba(52, 73, 94, 1) !important; /* Devient totalement opaque au survol */ color: rgba(255, 255, 255, 1) !important; box-shadow: 0 4px 10px rgba(0,0,0,0.30); } /* MODIFIÉ : Effet d'enfoncement propre sans le translateY d'avant */ .open-btn:active { transform: scale(.95); } /* ========================================== 4. STRUCTURE DU VOLET-MENU ========================================== */ .sidebar { height: 100vh !important; width: max-content; min-width: 230px; position: fixed !important; /* Force lasidebar à rester fixe même ouverte */ top: 0 !important; left: 0 !important; z-index: 100000 !important; /* Assure d'être au-dessus de tout */ background-color: #ffffff; border-radius: 0 24px 24px 0; /* <--- Modifie la taille de la courbure des 2 coins (haut et bas) à droite du volet-menu. */ border-right: 1px solid #e5e5e5; /* <--- AJOUTE CETTE LIGNE (contour droit discret pour mode clair) */ display: flex; flex-direction: column; box-sizing: border-box; padding-top: 6px; /* 55px; espace vide en haut dans le volet-menu */ overflow: hidden; transform: translateX(-102%); /* Cache bien le menu et l'ombre au repos */ opacity: 0; visibility: hidden; box-shadow: none; /* Pas d'ombre quand il est fermé */ transition: transform .35s ease, opacity .35s ease, visibility .35s, box-shadow .35s ease; } /* Menu ouvert : Glisse vers la droite et projette une ombre à droite */ .sidebar.active { transform: translateX(0); opacity: 1; visibility: visible; box-shadow: 4px 0 15px rgba(0, 0, 0, 0.15); /* Ombre douce et élégante pour le mode clair */ } /* ========================================================================== 5. ZONE DE DÉFILEMENT DU MENU ========================================================================== */ .sidebar-links-container { overflow-y: auto; overflow-x: hidden; flex-grow: 1; padding-bottom: 15px; } /* ========================================================================== 6. TITRE DU MENU (MODIFIÉ POUR S'ALIGNER AVEC LE X) ========================================================================== */ .sidebar-brand { font-family: Arial, sans-serif; /* <--- Police du titre "Bible2000.net". */ font-size: 20px; font-weight: bold; padding: 10px 40px 0px 16px; /* <--- Marge à droite augmentée à 40px pour le X */ margin-bottom: 0px; color: #2c3e50; line-height: 1.2; /* Aligne la hauteur de texte */ } /* Style unifié pour toutes les lignes de séparation du menu déclarées dans le HTML */ .menu-divider { border: none; border-top: 1px solid #e5e5e5; margin: 8px 0; } /* Adaptation automatique pour le mode sombre et les inversions */ html.sombre .menu-divider, html[style*="invert"] .menu-divider { border-top-color: #333 !important; } /* ========================================================================== 7. LIENS PRINCIPAUX DU MENU ========================================================================== */ .sidebar a { display: block; padding: 7px 14px; color: #333; text-decoration: none; font-size: 15px; white-space: nowrap; transition: background-color .2s, color .2s, padding-left .2s; } .sidebar a:hover { background-color: #eef4fb; color: #2980b9; padding-left: 18px; } /* ========================================================================== 8. ICÔNES DU MENU ========================================================================== */ .sidebar .icon { display: inline-block; width: 18px; margin-right: 5px; text-align: center; } /* ========================================================================== 9. BOUTON DE FERMETURE (X) ========================================================================== */ .sidebar .close-btn { position: absolute; top: 10px; right: 15px; padding: 0; font-size: 28px; color: #555; /* line-height: 1; */ /* Force une boîte de texte compacte pour le X */ } .sidebar .close-btn:hover { color: #c0392b; background: transparent; } /* ========================================================================== 10. FOND SOMBRE DERRIÈRE LA PAGE (CORRIGÉ POUR PERMETTRE LE DÉFILEMENT) ========================================================================== */ .menu-overlay { display: none; /* Pour que le curseur de texte paraisse dans Kompozer */ position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; /* Juste sous le menu */ background-color: transparent !important; /* Invisible */ opacity: 0; visibility: hidden; pointer-events: none; /* <--- MAGIE : Permet à la molette de traverser l'overlay ! */ transition: opacity .35s ease, visibility .35s; } .menu-overlay.active { display: block; /* Force l'affichage uniquement quand le menu s'ouvre */ opacity: 1; visibility: visible; pointer-events: none; /* <--- AJOUTEZ CETTE LIGNE : Permet de scroller et cliquer à travers l'overlay */ } /* ========================================================================== 11. SOUS-MENUS ========================================================================== */ .menu-item-dropdown { width: 100%; } /* Petite flèche */ .arrow { float: right; font-size: 10px; margin-top: 4px; transition: transform .25s; } /* Rotation lorsque le menu direct est ouvert (l'utilisation de l'enfant direct > évite de faire tourner toutes les flèches imbriquées) */ .menu-item-dropdown.open > a .arrow { transform: rotate(180deg); } /* MODIFIÉ : Transition asymétrique (plus rapide à la fermeture pour éliminer le gel) */ .submenu { max-height: 0; overflow: hidden; visibility: hidden; margin-left: 12px; padding-left: 5px; border-left: 1px solid #2980b9; transition: max-height .25s ease-out, visibility .25s; /* Réduit de 0.6s à 0.25s */ } /* MODIFIÉ : max-height au plus proche du contenu réel */ .menu-item-dropdown.open > .submenu { max-height: 310px; /* <--- Augmenté pour laisser passer toutes les lignes sans les couper - Baissé de 200px à 120px pour coller à la taille des listes */ visibility: visible; transition: max-height .4s ease-in-out, visibility .4s; } .submenu a { padding: 5px 8px !important; font-size: 13px !important; color: #555 !important; } .submenu a:hover { background-color: #eef4fb !important; color: #2980b9 !important; padding-left: 12px !important; } /* ========================================================================== 12. ADAPTATION AUX PETITS ÉCRANS ========================================================================== */ @media screen and (max-width: 767px) { .sidebar { min-width: 210px; } .open-btn { left: 5px; top: 8px; /* <--- MODIFIÉ : Un peu plus haut sur mobile */ font-size: 14px; padding: 6px 9px; } } /* ========================================================================== 13. COULEURS ET OMBRE DU MODE SOMBRE (DE BASE) ========================================================================== */ html.sombre body { background-color: #111 !important; color: #ddd; } html.sombre .sidebar { background-color: #111 !important; /* Même fond noir d'accueil */ color: white !important; border-right: 1px solid #444 !important; /* <--- #333 #555 #444 AJOUTE CETTE LIGNE (contour gris foncé pour mode sombre) */ } /* Ombre plus claire (gris/blanchâtre discret) pour détacher le menu du fond noir */ html.sombre .sidebar.active { box-shadow: 4px 0 12px rgba(255, 255, 255, 0.08); } html.sombre .sidebar-brand { color: white !important; border-color: #333 !important; } html.sombre .sidebar a { color: white !important; } html.sombre .sidebar a:hover { background-color: #222 !important; color: #7db7ff !important; } html.sombre .submenu a { color: #ddd !important; } html.sombre .submenu a:hover { background-color: #222 !important; } html.sombre .sidebar .close-btn { color: #999 !important; } html.sombre .sidebar .close-btn:hover { color: #ff5c5c !important; } /* ========================================================================== 14. PROTECTION DES COULEURS ET OMBRE DANS LES MODES D'INVERSION (1 et 2) ========================================================================== */ /* Ici, l'astuce ultime : le filtre global de l'HTML inversant tout, on ré-inverse le conteneur ".sidebar" pour annuler l'effet de filtre de page. Le volet-menu gardera un look sombre identique, peu importe le mode d'inversion. */ /* --- Mode Inversion 1 : invert(96%) --- */ html[style*="invert(96%)"]:not([style*="hue-rotate"]) .sidebar { filter: invert(104.1%) !important; /* Annule l'inversion simple */ } /* --- Mode Inversion 2 : invert(96%) hue-rotate(180deg) --- */ html[style*="invert(96%)"][style*="hue-rotate"] .sidebar { filter: invert(104.1%) hue-rotate(180deg) !important; /* Annule l'inversion et la rotation de teinte */ } /* On force la structure interne à se dessiner en sombre natif sous l'inversion */ html[style*="invert"] .sidebar { background-color: #111 !important; color: white !important; border-right: 1px solid #444 !important; /* <--- #333 #555 #444 AJOUTE CETTE LIGNE (contour pour modes d'inversion) */ } /* Ombre claire sous inversion (puisque ré-inversée, elle devient grise discrète à l'écran) */ html[style*="invert"] .sidebar.active { box-shadow: 4px 0 12px rgba(255, 255, 255, 0.08); } html[style*="invert"] .sidebar-brand { color: white !important; border-color: #333 !important; } html[style*="invert"] .sidebar a { color: white !important; } html[style*="invert"] .sidebar a:hover { background-color: #222 !important; color: #7db7ff !important; } html[style*="invert"] .submenu { border-left-color: #34495e !important; } html[style*="invert"] .submenu a { color: #ddd !important; } html[style*="invert"] .submenu a:hover { background-color: #222 !important; } html[style*="invert"] .sidebar .close-btn { color: #999 !important; } /* ========================================================================== 15. NETTOYAGE ET SÉCURITÉ ========================================================================== */ html, body { overflow-x: hidden; } .sidebar, .menu-overlay, .open-btn { will-change: transform, opacity; } /* ========================================================================== 16. AJUSTEMENTS POUR LE 3e NIVEAU (SOUS-SOUS-MENUS) - RALENTI ========================================================================== */ /* Permet au menu du Nouveau Testament de glisser lentement */ #sub-nouveau { /* --- MODIFIÉ : .6s pour s'aligner sur les autres sous-menus --- */ transition: max-height 0.25s ease-out, visibility 0.25s ease-out; } /* À l'état ouvert, on maintient la hauteur max adaptée */ /* MODIFIÉ : Baissé de 350px à 220px pour supprimer l'espace vide virtuel qui causait le lag */ .menu-item-dropdown.open > #sub-nouveau { max-height: 220px; } /* Décalage visuel et transition ralentie pour le 3e niveau (Marc / Luc) */ .sub-level-3 .submenu { margin-left: 15px; border-left: 1px solid #7f8c8d; /* --- MODIFIÉ : .6s pour une ouverture très fluide et douce --- */ transition: max-height 0.25s ease-out, visibility 0.25s ease-out; } /* Taille de police légèrement réduite pour les versions (3e niveau) */ .sub-level-3 .submenu a { font-size: 12px !important; } /* ========================================================================== 17. PERSONNALISATION DE LA BARRE DE DÉFILEMENT (SCROLLBAR) ========================================================================== */ /* --- Configuration Générale (Mode Clair) --- */ .sidebar-links-container { scrollbar-width: auto; /* Firefox : Utilise la largeur standard */ scrollbar-color: #a0a0a0 #f1f1f1; /* Firefox : [MODIFIÉ #ccc -> #a0a0a0] */ } .sidebar-links-container::-webkit-scrollbar { width: 14px; /* Chrome, Safari, Edge */ } .sidebar-links-container::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 7px; } /* Barre glissante (Thumb) avec ses arrondis */ .sidebar-links-container::-webkit-scrollbar-thumb { background-color: #a0a0a0; /* [MODIFIÉ #ccc -> #a0a0a0 pour être plus foncé] */ border-radius: 7px; border: 3px solid transparent; background-clip: padding-box; } .sidebar-links-container::-webkit-scrollbar-thumb:hover { background-color: #777; /* [MODIFIÉ #999 -> #777 au survol] */ border: 3px solid transparent; background-clip: padding-box; } /* --- Boutons flèches (Mode Clair) --- */ /* Bouton du Haut (Gris #555 - Légèrement plus foncé que #666 pour aller avec le reste) */ .sidebar-links-container::-webkit-scrollbar-button:single-button:vertical:decrement { height: 16px; background-color: #f1f1f1; background-position: center bottom 4px; background-repeat: no-repeat; background-size: 10px 6px; background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMCA2Ij48cG9seWdvbiBwb2ludHM9IjUsMCAxMCw2IDAsNiIgZmlsbD0iIzU1NTU1NSIvPjwvc3ZnPg=="); } /* Bouton du Bas (Gris #555) */ .sidebar-links-container::-webkit-scrollbar-button:single-button:vertical:increment { height: 16px; background-color: #f1f1f1; background-position: center top 4px; background-repeat: no-repeat; background-size: 10px 6px; background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMCA2Ij48cG9seWdvbiBwb2ludHM9IjUsNiAxMCwwIDAsMCIgZmlsbD0iIzU1NTU1NSIvPjwvc3ZnPg=="); } /* --- Mode Sombre Natif (html.sombre) --- */ html.sombre .sidebar-links-container { scrollbar-color: #555 #222; /* Firefox */ } html.sombre .sidebar-links-container::-webkit-scrollbar-track { background: #222 !important; } html.sombre .sidebar-links-container::-webkit-scrollbar-thumb { background-color: #555 !important; border: 3px solid transparent !important; background-clip: padding-box !important; } html.sombre .sidebar-links-container::-webkit-scrollbar-thumb:hover { background-color: #777 !important; border: 3px solid transparent !important; background-clip: padding-box !important; } /* Flèches en Mode Sombre (Blanc cassé #ddd sur fond #222) */ html.sombre .sidebar-links-container::-webkit-scrollbar-button:single-button:vertical:decrement { background-color: #222 !important; background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMCA2Ij48cG9seWdvbiBwb2ludHM9IjUsMCAxMCw2IDAsNiIgZmlsbD0iI2RkZGRkZCIvPjwvc3ZnPg==") !important; } html.sombre .sidebar-links-container::-webkit-scrollbar-button:single-button:vertical:increment { background-color: #222 !important; background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMCA2Ij48cG9seWdvbiBwb2ludHM9IjUsNiAxMCwwIDAsMCIgZmlsbD0iI2RkZGRkZCIvPjwvc3ZnPg==") !important; } /* --- Modes Inversion 1 & 2 --- */ html[style*="invert"] .sidebar-links-container { scrollbar-color: #555 #222; } html[style*="invert"] .sidebar-links-container::-webkit-scrollbar-track { background: #222 !important; } html[style*="invert"] .sidebar-links-container::-webkit-scrollbar-thumb { background-color: #555 !important; border: 3px solid transparent !important; background-clip: padding-box !important; } html[style*="invert"] .sidebar-links-container::-webkit-scrollbar-thumb:hover { background-color: #777 !important; border: 3px solid transparent !important; background-clip: padding-box !important; } /* Flèches en Mode Inversion (Blanc cassé #ddd sur fond #222) */ html[style*="invert"] .sidebar-links-container::-webkit-scrollbar-button:single-button:vertical:decrement { background-color: #222 !important; background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMCA2Ij48cG9seWdvbiBwb2ludHM9IjUsMCAgMTAsNiAwLDYiIGZpbGw9IiNkZGRkZGQiLz48L3N2Zz4=") !important; } html[style*="invert"] .sidebar-links-container::-webkit-scrollbar-button:single-button:vertical:increment { background-color: #222 !important; background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMCA2Ij48cG9seWdvbiBwb2ludHM9IjUsNiAxMCwwIDAsMCIgZmlsbD0iI2RkZGRkZCIvPjwvc3ZnPg==") !important; } /* ========================================================================== 18. PROTECTION FINALE DU BOUTON FIXE RACINE ========================================================================== */ /* protège les couleurs du bouton fixe lors des inversions globales */ html[style*="invert"] .open-btn { filter: invert(104.1%) !important; } /* ========================================================================== 19. GESTION DU DÉFILEMENT CONTRE LE BUG DE FILTRE DES NAVIGATEURS : force le défilement de la page à se faire uniquement dans tout ce qui ne concerne pas le volet-menu moderne, figeant définitivement l'écran pour le bouton et la sidebar (volet-menu moderne). En bloquant le défilement sur body et en l'activant sur .contenu-principal (dans le html), le navigateur fait défiler le volet-menu et son bouton. ========================================================================== */ html, body { height: 100vh !important; overflow: hidden !important; /* Empêche la page globale de bouger */ } .contenu-principal { height: 100vh !important; overflow-y: auto !important; /* Force le défilement uniquement ici */ width: 100%; -webkit-overflow-scrolling: touch; } /* --- Adaptation du contenu principal pour le Mode Sombre --- */ html.sombre .contenu-principal { scrollbar-color: #555 #0d0d0d; /* Couleur #555 du curseur scrollbar qu'on déplace & la couleur #0d0d0d; de fond scrollbar. */ } /* Cache le bouton d'ouverture lorsque le menu est actif */ .open-btn.menu-ouvert { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .25s, visibility .25s; }