/* ========================================================================== LAUNCH PERFORMANCE — feuille de style Deux thèmes pilotés par [data-theme] sur : "racing" (par défaut) et "atelier-clair". Le composant de bascule est en bas de fichier. ========================================================================== */ :root, [data-theme="racing"] { --bg: #0b0a0c; --panel: #140f10; --panel2: #1c1414; --panel-soft: #100c0d; --text: #f7f1ef; --muted: #b9a29b; --line: rgba(255, 255, 255, .08); --accent: #ff3b30; --accent2: #ffb020; --radius: 10px; --btn-text: #1a0605; --navbar-bg: rgba(11, 10, 12, .92); --nav-link: #e7d9d4; --nav-link-hover: #ffffff; --eyebrow-bg: rgba(255, 59, 48, .08); --eyebrow-color: #ffd9d0; --glow1: rgba(255, 59, 48, .18); --glow2: rgba(255, 176, 32, .14); --form-bg: #150f10; --footer-bg: #0a0708; --card-shadow: none; --font-head: 'Oswald', Arial, sans-serif; --font-body: 'Manrope', Arial, sans-serif; } [data-theme="atelier-clair"] { --bg: #f7f5f1; --panel: #fbfaf7; --panel2: #ffffff; --panel-soft: #efebe4; --text: #16212b; --muted: #57697a; --line: rgba(15, 23, 32, .10); --accent: #ff7a1a; --accent2: #0b4f8a; --radius: 16px; --btn-text: #12151a; --navbar-bg: rgba(247, 245, 241, .92); --nav-link: #3c4a56; --nav-link-hover: #16212b; --eyebrow-bg: rgba(255, 122, 26, .08); --eyebrow-color: #a5490a; --glow1: rgba(255, 122, 26, .14); --glow2: rgba(11, 79, 138, .10); --form-bg: #ffffff; --footer-bg: #efece6; --card-shadow: 0 10px 28px rgba(20, 30, 40, .07); --font-head: 'Sora', Arial, sans-serif; --font-body: 'Work Sans', Arial, sans-serif; } * { box-sizing: border-box } html { scroll-behavior: smooth } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-body); line-height: 1.6; transition: background .2s ease, color .2s ease; } h1, h2, h3, h4, .display-xl, .section-title, .navbar-brand { font-family: var(--font-head); } .navbar { background: var(--navbar-bg); backdrop-filter: blur(16px); border-bottom: 1px solid var(--line); } .navbar-brand { display: flex; align-items: center; font-weight: 800; color: var(--text) !important } .brand-mark { width: 42px; height: 42px; border-radius: 12px; background: linear-gradient(135deg, var(--accent), var(--accent2)); display: grid; place-items: center; color: var(--btn-text); margin-right: .7rem; } .nav-link { color: var(--nav-link) !important; font-weight: 600 } .nav-link:hover, .nav-link.active { color: var(--nav-link-hover) !important } /* le burger mobile est dessiné en blanc par la classe Bootstrap navbar-dark : on l'inverse en thème clair pour qu'il reste visible sur fond clair */ [data-theme="atelier-clair"] .navbar-toggler-icon { filter: invert(1) brightness(.35) } [data-theme="atelier-clair"] .navbar-toggler { border-color: color-mix(in srgb, var(--text) 25%, var(--line)) } .btn-accent { background: linear-gradient(135deg, var(--accent), var(--accent2)); border: 0; color: var(--btn-text); font-weight: 800; border-radius: 999px; padding: .8rem 1.2rem; } .btn-outline-light { border-radius: 999px; padding: .8rem 1.2rem; background: transparent; color: var(--text); border: 1px solid color-mix(in srgb, var(--text) 30%, var(--line)); } .btn-outline-light:hover { color: var(--text); border-color: var(--text); background: color-mix(in srgb, var(--text) 8%, transparent); } .btn-theme-toggle { display: inline-flex; align-items: center; gap: .5rem; padding: .6rem .95rem; border-radius: 999px; border: 1px solid var(--line); background: color-mix(in srgb, var(--text) 6%, transparent); color: var(--text); font-weight: 700; font-size: .82rem; cursor: pointer; line-height: 1; } .btn-theme-toggle:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)) } .btn-theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px } .btn-theme-toggle svg { color: var(--accent) } .hero, .page-hero { position: relative; background: radial-gradient(circle at 80% 12%, var(--glow1), transparent 30%), radial-gradient(circle at 22% 25%, var(--glow2), transparent 28%); } .hero { padding: 8.5rem 0 6rem } .page-hero { padding: 7.5rem 0 4rem } .eyebrow { display: inline-flex; padding: .4rem .7rem; border: 1px solid var(--line); border-radius: 999px; color: var(--eyebrow-color); background: var(--eyebrow-bg); font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } .display-xl, .page-hero h1, .section-title { font-weight: 800; letter-spacing: -.04em } .display-xl { font-size: clamp(2.7rem, 6vw, 5.6rem); line-height: .98 } .page-hero h1 { font-size: clamp(2.5rem, 5vw, 4.8rem) } .section-title { font-size: clamp(2rem, 4vw, 3.6rem) } .gradient-text { background: linear-gradient(90deg, var(--text), var(--accent), var(--accent2)); -webkit-background-clip: text; background-clip: text; color: transparent; } .lead-xl, .section-sub { color: var(--muted); max-width: 760px } .lead-xl { font-size: 1.12rem } .section { padding: 5.5rem 0 } .section-soft { background: var(--panel-soft) } .service-card, .form-card { background: linear-gradient(180deg, var(--panel2), var(--panel)); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; height: 100%; box-shadow: var(--card-shadow, none); } .service-card { transition: .25s } .service-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); } .service-icon { width: 48px; height: 48px; border-radius: 14px; background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent); display: grid; place-items: center; margin-bottom: 1rem; } .service-card p { color: var(--muted) } .price { font-size: 1.18rem; font-weight: 800 } .pill { display: inline-flex; padding: .35rem .65rem; border-radius: 999px; background: color-mix(in srgb, var(--text) 6%, transparent); border: 1px solid var(--line); font-size: .78rem; } .feature-line { display: flex; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--line) } .feature-num { color: var(--accent); font-weight: 800 } .cta-band { border: 1px solid var(--line); border-radius: 26px; padding: 2rem; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 10%, var(--bg)), color-mix(in srgb, var(--accent2) 8%, var(--bg))); } .form-control, .form-select, .form-control:focus, .form-select:focus { background: var(--form-bg); border: 1px solid var(--line); color: var(--text); border-radius: 12px; padding: .85rem 1rem; box-shadow: none; } .form-label { font-size: .85rem; font-weight: 700; color: color-mix(in srgb, var(--text) 82%, var(--muted)) } .contact-item { display: flex; gap: .8rem; padding: 1rem 0; border-bottom: 1px solid var(--line) } .footer { padding: 3rem 0; border-top: 1px solid var(--line); background: var(--footer-bg); color: var(--muted) } .footer a { color: color-mix(in srgb, var(--text) 82%, var(--muted)); text-decoration: none } .legal-note { font-size: .82rem; color: var(--muted) } .alert-ok { background: #0e352c; border: 1px solid #24745d; color: #d7fff3; padding: 1rem; border-radius: 12px } .alert-err { background: #3b1717; border: 1px solid #8b3939; color: #ffe4e4; padding: 1rem; border-radius: 12px } @media (max-width: 991px) { .hero { padding-top: 7rem } .section { padding: 4.5rem 0 } } /* -------------------------- expertises -------------------------- */ .expertise-section { background: var(--bg) } .expertise-card h3 { font-size: 1.25rem } .expertise-accent { color: var(--accent) } .expertise-card strong { color: var(--text) } .expertise-card .service-icon { width: 58px; height: 58px; border-radius: 50%; font-size: 1.2rem }