/* ============================================================================= THEME.CSS – 🌗 Variables & fond de page Light/Dark Harmonisé le 2025-07-07 ============================================================================= */ /* ========================================================================== 🎨 MODE CLAIR ========================================================================== */ html.light { --bg-color: #f8f9fa; /* Fond “body” */ --text-color: #212529; --primary: #007bff; /* Bleu Bootstrap */ --accent: #6c63ff; /* Violet CTA / icônes */ --accent-hover: #574de6; --scroll-btn-bg: #e0e0f0; --scroll-btn-color:#222222; --scroll-btn-hover:#c0c0e0; } /* ========================================================================== 🌙 MODE SOMBRE ========================================================================== */ html.dark { --bg-color: #0f0c29; --bs-secondary-color: #d2d2d2; --text-color: #f8f9fa; --primary: #7f5af0; --accent: #a89aff; --accent-hover: #c2b6ff; --scroll-btn-bg: #7f5af0; --scroll-btn-color:#ffffff; --scroll-btn-hover:#624de2; } /* ========================================================================== 🌈 FOND DE PAGE – HTML ========================================================================== */ html.light { background: linear-gradient(135deg, #e0f7fa 0%, #e3f2fd 35%, #f5faff 100%); background-repeat: no-repeat; background-size: cover; background-position: center; } html.dark { background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%); background-repeat: no-repeat; background-size: cover; background-position: center; } /* ========================================================================== 🚀 TRANSITIONS GLOBALES ========================================================================== */ body { min-height: 100vh; color: var(--text-color); background: transparent; /* pour laisser le fond du html visible */ transition: background-color 0.3s ease, color 0.3s ease; } /* ========================================================================== ✅ CORRECTION iOS / Mobile – étend le fond même au-delà du scroll ========================================================================== */ /* Étendre le fond au niveau du html */ html { height: 100%; background-color: transparent; } /* Le body doit aussi prendre toute la hauteur et synchroniser le fond */ body { min-height: 100vh; background: inherit; background-attachment: scroll; /* évite les bugs de "fixed" sur mobile */ background-repeat: no-repeat; background-size: cover; background-position: center center; overscroll-behavior: none; -webkit-overflow-scrolling: touch; } /* Mode clair : fond hérité sur */ html.light { background: linear-gradient(135deg, #e0f7fa 0%, #e3f2fd 35%, #f5faff 100%); } html.light body { background: inherit; } /* Mode sombre : fond hérité sur */ html.dark { background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%); } html.dark body { background: inherit; }