/* ===================================================== CONSEIL SNDGK — Variantes d'ambiance (DEMO comparatif) Activées via [data-theme] sur . Fichier jetable : une fois l'ambiance choisie, on la fond dans premium.css. - (défaut, aucun attribut) = Sombre (#0A0A0B) - data-theme="charcoal" = Anthracite chaud - data-theme="light" = Corps clair (hero reste sombre) ===================================================== */ /* ---------- CHARCOAL (sombre adouci, chaud) ---------- */ [data-theme="charcoal"] { --bg: #15151A; --bg-2: #1B1B22; --bg-3: #23232B; --surface: rgba(255, 255, 255, 0.04); --fg: #ECEAE3; --muted: #9C988E; --muted-2: #6A675E; --line: rgba(255, 255, 255, 0.10); --line-2: rgba(255, 255, 255, 0.06); } /* ---------- LIGHT (corps clair crème, hero conservé sombre) ---------- */ [data-theme="light"] { --bg: #F4F1EA; --bg-2: #ECE8DF; --bg-3: #FFFFFF; --surface: rgba(0, 0, 0, 0.03); --fg: #18181B; --muted: #6B6862; --muted-2: #A29D93; --line: rgba(0, 0, 0, 0.12); --line-2: rgba(0, 0, 0, 0.07); } /* Le hero garde une lisibilité claire (il est sur la vidéo sombre) */ [data-theme="light"] .hero h1 { color: #F4F4F1; } [data-theme="light"] .hero h1 em { color: rgba(244, 244, 241, 0.7); } [data-theme="light"] .hero-sub, [data-theme="light"] .hero-eyebrow .eyebrow, [data-theme="light"] .scroll-cue, [data-theme="light"] .hero-meta { color: rgba(244, 244, 241, 0.72); } [data-theme="light"] .hero-meta .clock { color: #fff; } [data-theme="light"] .hero-foot { border-color: rgba(255, 255, 255, 0.2); } [data-theme="light"] .scroll-cue .arrow { border-color: rgba(255, 255, 255, 0.28); } /* Header : barre claire constante (texte foncé lisible) en thème clair */ [data-theme="light"] .site-header { background: rgba(244, 241, 234, 0.7); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line-2); } [data-theme="light"] .site-header.scrolled { background: rgba(244, 241, 234, 0.88); } [data-theme="light"] .burger span { background: var(--fg); } /* Menu mobile clair en thème clair */ @media (max-width: 900px) { [data-theme="light"] .main-nav { background: rgba(248, 245, 238, 0.98); } } /* ===== Enrichissement du thème clair (moins « vide ») ===== */ /* Rythme : alternance crème / blanc entre les sections */ [data-theme="light"] section.block:nth-of-type(even) { background: #FFFFFF; } [data-theme="light"] section.block { border-top-color: rgba(0, 0, 0, 0.06); } /* Texture papier subtile (derrière le contenu) */ [data-theme="light"] section.block > .wrap { position: relative; z-index: 1; } [data-theme="light"] section.block::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.32; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)' opacity='0.6'/%3E%3C/svg%3E"); background-size: 160px 160px; } /* Cartes : vraie présence (ombre chaude + bord) */ [data-theme="light"] .card { border-color: rgba(0, 0, 0, 0.08); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03), 0 14px 34px rgba(30, 22, 14, 0.06); } [data-theme="light"] .card:hover { box-shadow: 0 22px 54px rgba(30, 22, 14, 0.13); } /* PULSE : bande sombre contrastée (rythme + remplit le milieu) */ [data-theme="light"] #pulse { background: #141418 !important; } [data-theme="light"] #pulse::before { display: none; } [data-theme="light"] #pulse .display, [data-theme="light"] #pulse .stat .n { color: #F4F4F1; } [data-theme="light"] #pulse .lead, [data-theme="light"] #pulse .eyebrow, [data-theme="light"] #pulse .stat .t { color: rgba(244, 244, 241, 0.66); } [data-theme="light"] #pulse .btn--ghost { color: #F4F4F1; border-color: rgba(255, 255, 255, 0.25); } [data-theme="light"] #pulse .btn--ghost:hover { background: #F4F4F1; color: #141418; } /* ============== Sélecteur d'ambiance (UI dev) ============== */ .theme-switcher { position: fixed; bottom: 14px; right: 14px; z-index: 260; display: flex; align-items: center; gap: 0.3rem; background: rgba(18, 18, 22, 0.82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 999px; padding: 0.35rem 0.45rem; font-family: 'Space Grotesk', sans-serif; } .theme-switcher .ts-label { font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: #9C988E; padding: 0 0.4rem; } .theme-switcher button { font: inherit; font-size: 0.72rem; color: #ECEAE3; background: none; border: none; padding: 0.35rem 0.7rem; border-radius: 999px; cursor: pointer; transition: background 0.25s, color 0.25s; } .theme-switcher button:hover { color: #fff; } .theme-switcher button.active { background: var(--red); color: #fff; }