/* ========================================================================== BASE.CSS — Phaneon Portfolio Contient : reset CSS, variables globales (mode clair + sombre), styles de base du body, scrollbar, boutons, typographie, animations reveal ========================================================================== */ /* -------------------------------------------------------------------------- 1. RESET UNIVERSEL -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* -------------------------------------------------------------------------- 2. VARIABLES CSS — MODE CLAIR (défaut) -------------------------------------------------------------------------- */ :root { --c-bg: #ffffff; --c-surface: #f5f4ff; --c-dark: #0d0d12; --c-text: #1a1a2e; --c-muted: #6b6b8a; --c-accent: #5b5bd6; --c-accent2: #7c7cf8; --c-border: rgba(0, 0, 0, .08); --c-blob: rgba(150, 140, 255, .18); --c-nav-bg: rgba(255, 255, 255, .88); --radius: 22px; --transition: .35s cubic-bezier(.4, 0, .2, 1); } /* -------------------------------------------------------------------------- 3. VARIABLES CSS — MODE SOMBRE (bleu nuit) Activé de 2 façons : A) Bouton toggle dans la nav → ajoute data-theme="dark" sur B) Préférences système → @media prefers-color-scheme: dark La logique de priorité : • Système sombre + pas de bouton forcé → dark (via @media) • Bouton forcé dark → dark (via [data-theme="dark"]) • Bouton forcé light → light (data-theme="light" bloque @media) -------------------------------------------------------------------------- */ /* A — Thème forcé manuellement via le bouton */ [data-theme="dark"] { --c-bg: #0f0f1e; --c-surface: #171728; --c-dark: #080810; --c-text: #eeeef8; --c-muted: rgba(200, 200, 230, .5); --c-border: rgba(255, 255, 255, .08); --c-blob: rgba(100, 90, 220, .22); --c-nav-bg: rgba(15, 15, 30, .88); } /* B — Détection automatique du système (ignoré si data-theme="light") */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --c-bg: #0f0f1e; --c-surface: #171728; --c-dark: #080810; --c-text: #eeeef8; --c-muted: rgba(200, 200, 230, .5); --c-border: rgba(255, 255, 255, .08); --c-blob: rgba(100, 90, 220, .22); --c-nav-bg: rgba(15, 15, 30, .88); } } /* Transition douce au changement de thème */ body, nav, section, footer, .hero-badge, .about-card-float, .service-row, .contact-item, .contact-form, .value-item, .pf-card, input, textarea, select { transition: background-color .4s ease, border-color .4s ease, color .4s ease; } /* -------------------------------------------------------------------------- 4. BASE HTML & BODY -------------------------------------------------------------------------- */ html { scroll-behavior: smooth; } body { background: var(--c-bg); color: var(--c-text); font-family: 'Plus Jakarta Sans', sans-serif; font-size: 16px; line-height: 1.65; overflow-x: hidden; } /* -------------------------------------------------------------------------- 5. SCROLLBAR PERSONNALISÉE -------------------------------------------------------------------------- */ ::-webkit-scrollbar { width: 5px; } ::-webkit-scrollbar-track { background: var(--c-surface); } ::-webkit-scrollbar-thumb { background: var(--c-accent); border-radius: 10px; } /* -------------------------------------------------------------------------- 6. BOUTONS GLOBAUX -------------------------------------------------------------------------- */ .btn-primary { display: inline-flex; align-items: center; background: var(--c-accent); color: #fff; padding: .85rem 2rem; border-radius: 50px; font-weight: 700; text-decoration: none; font-size: .95rem; transition: background var(--transition), transform var(--transition), box-shadow var(--transition); box-shadow: 0 4px 18px rgba(91, 91, 214, .25); } .btn-primary:hover { background: var(--c-accent2); transform: translateY(-3px); box-shadow: 0 10px 28px rgba(91, 91, 214, .35); } .btn-outline { display: inline-flex; align-items: center; background: transparent; border: 2px solid var(--c-border); color: var(--c-text); padding: .85rem 2rem; border-radius: 50px; font-weight: 600; text-decoration: none; font-size: .95rem; transition: border-color .2s, color .2s, background .2s; } .btn-outline:hover { border-color: var(--c-accent); color: var(--c-accent); background: rgba(91, 91, 214, .05); } /* -------------------------------------------------------------------------- 7. TYPOGRAPHIE PARTAGÉE -------------------------------------------------------------------------- */ .section-tag { display: block; font-size: .78rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--c-accent); margin-bottom: .8rem; } h2 { font-size: clamp(2.2rem, 5vw, 4rem); font-weight: 900; letter-spacing: -2px; line-height: 1.0; color: var(--c-text); margin-bottom: 1.2rem; } .section-intro { color: var(--c-muted); max-width: 460px; font-size: 1rem; line-height: 1.7; } /* -------------------------------------------------------------------------- 8. ANIMATION REVEAL AU SCROLL -------------------------------------------------------------------------- */ .reveal { opacity: 0; transform: translateY(30px); transition: opacity .7s ease, transform .7s ease; } .reveal.visible { opacity: 1; transform: none; } /* -------------------------------------------------------------------------- 9. PADDING PAR DÉFAUT DES SECTIONS -------------------------------------------------------------------------- */ section:not(#hero) { padding: 7rem 6vw; } @media (max-width: 600px) { section:not(#hero) { padding: 5rem 5vw; } }