/* ========================================================================= dark-mode.css — thème sombre du site public. Fichier volontairement séparé et additif : n'importe quoi ici n'écrase que le comportement sous `html.dark`, le mode clair (styles.css) reste intact et sert de source de vérité. Activé/désactivé en basculant la classe "dark" sur (voir theme-toggle.js). ========================================================================= */ html.dark{ color-scheme: dark; } html.dark body{ background:#0F0F0E; } /* ---------- Surfaces ---------- */ html.dark .bg-white{ background-color:#1A1917 !important; } html.dark .bg-white\/90{ background-color:rgba(15,15,14,.88) !important; } html.dark .bg-white\/60{ background-color:rgba(26,25,23,.6) !important; } html.dark .bg-mist{ background-color:#141311 !important; } html.dark .card{ background:#1A1917; border-color:#2C2A25; } html.dark .card:hover{ box-shadow:0 24px 50px -28px rgba(0,0,0,.65); } /* ---------- Bordures ---------- */ html.dark .border-line{ border-color:#2C2A25 !important; } html.dark .bg-line{ background-color:#2C2A25 !important; } html.dark .text-line{ color:#2C2A25 !important; } /* ---------- Texte ---------- */ html.dark .text-ink{ color:#F3F1EC !important; } html.dark .text-ink-700{ color:#E4E0D8 !important; } html.dark .text-ink-500{ color:#A39D91 !important; } html.dark .text-ink-500\/40{ color:rgba(163,157,145,.4) !important; } html.dark .text-ink-500\/60{ color:rgba(163,157,145,.6) !important; } /* ---------- Composants ---------- */ html.dark .btn-outline{ border-color:#2C2A25; color:#F3F1EC; } html.dark .btn-outline:hover{ background:#211F1C; border-color:#F3F1EC; } html.dark select, html.dark input:not([type="checkbox"]):not([type="radio"]), html.dark textarea{ color:#F3F1EC; } html.dark input::placeholder, html.dark textarea::placeholder{ color:#6B675E; } html.dark select option{ background:#1A1917; color:#F3F1EC; } html.dark .sector-chip{ background:#1A1917; border-color:#2C2A25; color:#A39D91; } html.dark .trust-word{ color:#A39D91; } html.dark .trust-word:hover{ color:#F3F1EC; } html.dark .t-dot{ background:#2C2A25; } html.dark .stadiya-editable{ outline-color:rgba(223,99,76,.55); } html.dark .stadiya-editable:hover{ background-color:rgba(223,99,76,.14); } html.dark .stadiya-image-overlay{ background:rgba(0,0,0,.68); } /* ---------- Menu de navigation (texte illisible corrigé) ---------- */ html.dark .nav-link{ color:#B8B3A8; } html.dark .nav-link:hover{ color:#F3F1EC; } html.dark .nav-link.active{ color:#F3F1EC; } /* ---------- Boutons noirs : bordure claire pour rester visibles sur fond sombre ---------- */ html.dark .btn-primary{ background:#1A1917; border-color:rgba(255,255,255,.35); } html.dark .btn-primary:hover{ border-color:rgba(255,255,255,.6); } html.dark .btn-outline{ border-color:rgba(255,255,255,.22); } html.dark .btn-outline:hover{ border-color:rgba(255,255,255,.5); } /* ---------- Hero (fond .mesh) : assombri comme le reste de la page plutôt que de forcer le texte en clair sur un fond resté clair ---------- */ html.dark .mesh{ background: radial-gradient(600px 400px at 8% 15%, rgba(223,99,76,.22), transparent 60%), radial-gradient(500px 380px at 92% 0%, rgba(223,99,76,.16), transparent 55%), radial-gradient(700px 500px at 50% 100%, rgba(223,99,76,.10), transparent 60%), #0F0F0E !important; } html.dark .eyebrow{ background:rgba(255,255,255,.1); color:#fff; } /* ---------- Logo : la version texte noir devient illisible en dark mode, on repasse sur le motif de points + texte blanc (comme le footer) ---------- */ .logo-light-only{ display:block; } .logo-dark-only{ display:none; } html.dark .logo-light-only{ display:none; } html.dark .logo-dark-only{ display:flex; } /* ---------- Icône du bouton de bascule ---------- */ .theme-toggle .icon-sun{ display:none; } .theme-toggle .icon-moon{ display:block; } html.dark .theme-toggle .icon-sun{ display:block; } html.dark .theme-toggle .icon-moon{ display:none; }