/* ========================================================================== WATTNA — Feuille de style commune Charte graphique : voir DESIGN.md ("Luminous Charge"). Complète les classes utilitaires Tailwind (assets/js/tailwind-config.js) avec les quelques styles impossibles à exprimer en utilitaires purs. Partagée par toutes les pages du site (header/footer inclus). ========================================================================== */ html { scroll-behavior: smooth; } body { font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", sans-serif; } [dir="rtl"] body { font-family: "Readex Pro", sans-serif; } [dir="rtl"] body h1, [dir="rtl"] body h2, [dir="rtl"] body h3, [dir="rtl"] body h4, [dir="rtl"] body h5, [dir="rtl"] body h6, [dir="rtl"] body p, [dir="rtl"] body a, [dir="rtl"] body button, [dir="rtl"] body input, [dir="rtl"] body textarea, [dir="rtl"] body select, [dir="rtl"] body label, [dir="rtl"] body li, [dir="rtl"] body td, [dir="rtl"] body th { font-family: inherit; line-height: 1.3; } /* ---------- Thème clair / sombre : variables CSS ---------- Toutes les couleurs qui changent entre les deux thèmes vivent ici. Le violet/vert de marque (#6600FF / #00FF44) restent identiques dans les deux thèmes et sont posés en dur ailleurs — seules les couleurs de fond, de texte et de bordure varient. Bascule pilotée par la classe `.dark` sur (voir assets/js/main.js pour le toggle + persistance). */ :root { color-scheme: light; --c-bg: 255 255 255; --c-on-bg: #0a0014; --c-on-surface: #0a0014; --c-on-surface-variant: #585167; --c-text-dimmed: #8a8a8a; --c-outline-variant: #dcd6e6; --c-surface-container-lowest: #f7f5fc; --c-primary: 102 0 255; --c-primary-hover: #5200cc; --c-success: 0 255 68; --c-success-strong: #00a836; --c-glass-bg: rgba(255, 255, 255, 0.72); --c-glass-border: rgba(102, 0, 255, 0.14); --c-glass-shadow: 0 12px 34px -16px rgba(42, 0, 102, 0.22); --c-glass-hover-border: rgba(0, 166, 54, 0.35); --c-glass-hover-shadow: 0 12px 34px -16px rgba(0, 166, 54, 0.18); --c-ghost-border: rgba(102, 0, 255, 0.4); --c-ghost-bg: rgba(102, 0, 255, 0.05); --c-ghost-hover-bg: rgba(102, 0, 255, 0.1); --c-ghost-hover-border: rgba(102, 0, 255, 0.7); --c-field-bg: #f7f5fc; --c-field-border: rgba(102, 0, 255, 0.22); --c-field-placeholder: rgba(10, 0, 20, 0.4); --c-field-icon: rgba(102, 0, 255, 0.45); --c-select-bg: #f7f5fc; --c-banner-error-bg: rgba(220, 38, 38, 0.08); --c-banner-error-border: rgba(220, 38, 38, 0.3); --c-banner-error-text: #b91c1c; --c-lang-btn: #8a8399; --c-body-bg-image: none; } html.dark { color-scheme: dark; --c-bg: 27 8 64; --c-on-bg: #f3eefc; --c-on-surface: #f3eefc; --c-on-surface-variant: rgba(243, 238, 252, 0.7); --c-text-dimmed: rgba(243, 238, 252, 0.55); --c-outline-variant: rgba(255, 255, 255, 0.12); --c-surface-container-lowest: #150633; --c-primary-hover: #8a3fff; --c-glass-bg: rgba(255, 255, 255, 0.05); --c-glass-border: rgba(255, 255, 255, 0.1); --c-glass-shadow: 0 12px 34px -16px rgba(0, 0, 0, 0.45); --c-glass-hover-border: rgba(0, 255, 68, 0.3); --c-glass-hover-shadow: 0 12px 34px -16px rgba(0, 255, 68, 0.15); --c-ghost-border: rgba(255, 255, 255, 0.55); --c-ghost-bg: rgba(255, 255, 255, 0.08); --c-ghost-hover-bg: rgba(255, 255, 255, 0.18); --c-ghost-hover-border: rgba(255, 255, 255, 0.8); --c-field-bg: rgba(255, 255, 255, 0.05); --c-field-border: rgba(255, 255, 255, 0.18); --c-field-placeholder: rgba(243, 238, 252, 0.4); --c-field-icon: rgba(243, 238, 252, 0.4); --c-select-bg: #3d246a; --c-banner-error-bg: rgba(255, 107, 107, 0.12); --c-banner-error-border: rgba(255, 107, 107, 0.4); --c-banner-error-text: #ffb4ab; --c-lang-btn: rgba(243, 238, 252, 0.55); --c-body-bg-image: linear-gradient( 160deg, #1b0840 0%, #2a0d5f 60%, #1b0840 100% ); } body { background-color: rgb(var(--c-bg)); background-image: var(--c-body-bg-image); background-attachment: fixed; color: var(--c-on-bg); overflow-x: hidden; transition: background-color 0.3s ease, color 0.3s ease; } .material-symbols-outlined { font-family: "Material Symbols Outlined"; } .glass-card { background: var(--c-glass-bg); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid var(--c-glass-border); box-shadow: var(--c-glass-shadow); transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; } .glass-card:hover { border-color: var(--c-glass-hover-border); box-shadow: var(--c-glass-hover-shadow); } .cta-primary { background-color: #6600ff; color: #fff; font-weight: 600; box-shadow: 0 10px 26px -8px rgba(102, 0, 255, 0.55); transition: transform 0.2s, box-shadow 0.2s, background-color 0.2s; } .cta-primary:hover { background-color: var(--c-primary-hover); box-shadow: 0 14px 32px -8px rgba(102, 0, 255, 0.65); transform: translateY(-1px); } .cta-ghost { border: 1.5px solid var(--c-ghost-border); color: var(--c-on-bg); background: var(--c-ghost-bg); transition: background-color 0.2s, border-color 0.2s, color 0.2s; } .cta-ghost:hover { background: var(--c-ghost-hover-bg); border-color: var(--c-ghost-hover-border); } .step-line { background: linear-gradient( 90deg, rgba(102, 0, 255, 0.12), rgba(102, 0, 255, 0.45) 55%, rgba(0, 255, 68, 0.55) ); } .revenue-number { background: linear-gradient(90deg, #6600ff 0%, #00a836 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .type-btn { color: var(--c-on-bg); font-weight: 600; cursor: pointer; } .type-btn.active { background: rgba(0, 255, 68, 0.12); border-color: #00ff44 !important; color: #00ff44; } .field-input { background: var(--c-field-bg); color: var(--c-on-bg); font-size: 1rem; border: 1px solid var(--c-field-border); border-radius: 0.5rem; padding: 0.7rem 0.9rem; width: 100%; transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; } .field-input::placeholder, input::placeholder, textarea::placeholder { color: var(--c-field-placeholder); } .field-input:focus { outline: none; border-color: #00ff44; box-shadow: 0 0 0 3px rgba(0, 255, 68, 0.15); } /* Le fond translucide de .field-input (verre dépoli) ne fonctionne pas pour un natif ne laisse aucun contrôle CSS sur la couleur de survol de ses options une fois le popup ouvert (limitation des navigateurs, identique sur Chrome/Firefox/Safari) : la règle select option:hover ci-dessus est ignorée en pratique. Ce widget remplace donc le popup natif par une liste HTML classique, entièrement stylable. Le vrai