/* Voltio — styles complémentaires à Tailwind (chargé en CDN dans les pages HTML) */ html { scroll-behavior: smooth; } body { -webkit-font-smoothing: antialiased; } /* Scrollbar discrète pour l'application */ .voltio-scroll::-webkit-scrollbar { width: 8px; height: 8px; } .voltio-scroll::-webkit-scrollbar-track { background: transparent; } .voltio-scroll::-webkit-scrollbar-thumb { background: #404040; border-radius: 999px; } /* Petites transitions cohérentes sur les éléments interactifs */ button, a { transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.1s ease; } button:active { transform: scale(0.98); } /* Toast */ .voltio-toast { animation: voltio-toast-in 0.2s ease-out; } @keyframes voltio-toast-in { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } } /* Modale */ .voltio-modal-overlay { animation: voltio-fade-in 0.15s ease-out; } @keyframes voltio-fade-in { from { opacity: 0; } to { opacity: 1; } } /* ============================================================================ MODE CLAIR Le site est conçu en mode sombre par défaut (data-theme="dark" ou absent). Quand data-theme="light" est posé sur (via js/theme.js), ces règles remplacent les couleurs neutres pour obtenir un thème clair, SANS avoir à toucher au HTML de chaque page. Les pages d'impression PDF (devis-pdf.html, facture-pdf.html) ne posent jamais cet attribut : elles restent toujours blanches, comme un vrai document imprimé. ============================================================================ */ html[data-theme="light"] body { background-color: #ffffff !important; } html[data-theme="light"] .bg-neutral-950 { background-color: #ffffff !important; } html[data-theme="light"] .bg-neutral-950\/90 { background-color: rgba(255,255,255,0.9) !important; } html[data-theme="light"] .bg-neutral-900, html[data-theme="light"] .bg-neutral-900\/30, html[data-theme="light"] .bg-neutral-900\/40, html[data-theme="light"] .bg-neutral-900\/60 { background-color: #f7f7f7 !important; } html[data-theme="light"] .bg-neutral-800, html[data-theme="light"] .bg-neutral-800\/50, html[data-theme="light"] .bg-neutral-800\/60 { background-color: #eeeeee !important; } html[data-theme="light"] .bg-neutral-700 { background-color: #e2e2e2 !important; } html[data-theme="light"] .hover\:bg-neutral-900:hover, html[data-theme="light"] .hover\:bg-neutral-800:hover, html[data-theme="light"] .hover\:bg-neutral-700:hover { background-color: #ececec !important; } html[data-theme="light"] .border-neutral-800, html[data-theme="light"] .border-neutral-900 { border-color: #e2e2e2 !important; } html[data-theme="light"] .border-neutral-700 { border-color: #d4d4d4 !important; } html[data-theme="light"] .divide-neutral-800 > :not([hidden]) ~ :not([hidden]) { border-color: #e2e2e2 !important; } html[data-theme="light"] .text-white { color: #171717 !important; } html[data-theme="light"] .text-neutral-100, html[data-theme="light"] .text-neutral-200, html[data-theme="light"] .text-neutral-300 { color: #404040 !important; } html[data-theme="light"] .text-neutral-400 { color: #6b6b6b !important; } html[data-theme="light"] .text-neutral-500 { color: #7a7a7a !important; } html[data-theme="light"] .text-neutral-600 { color: #9a9a9a !important; } html[data-theme="light"] .placeholder-neutral-500::placeholder { color: #9a9a9a !important; } html[data-theme="light"] .hover\:text-white:hover, html[data-theme="light"] .hover\:text-neutral-300:hover { color: #171717 !important; } /* Champs et boutons neutres : garder un contraste correct en clair */ html[data-theme="light"] input, html[data-theme="light"] textarea, html[data-theme="light"] select { color: #171717 !important; } /* Barre de défilement, en clair */ html[data-theme="light"] .voltio-scroll::-webkit-scrollbar-thumb { background: #cfcfcf; }