/* ========================================================================== BASE — variables, reset, typographie, éléments génériques (boutons, titres de section, animations de reveal). Chargé sur toutes les pages. ========================================================================== */ :root { --noir: #000; --noir2: #0a0a0b; --card: #111114; --lime: #E5F82C; --blanc: #F5F5F1; --gris: #9a9a96; --ligne: #1c1c20; --orange: #FF6A1A; --green: #9EE04B; --blue: #2E6BE0; --pink: #E81E86; --red: #E62636; --purple: #9333EA; --brown: #B57B32; --pale: #E9D24A; --disp: 'Anton', 'FuelDisplay', sans-serif } * { margin: 0; padding: 0; box-sizing: border-box } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 88px } body { background: var(--noir); color: var(--blanc); font-family: 'Inter', sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden } .disp { font-family: var(--disp); font-style: italic; text-transform: uppercase; letter-spacing: .005em; line-height: .92; font-weight: 700 } .wrap { max-width: 1240px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 44px) } a { color: inherit; text-decoration: none } img { display: block; max-width: 100% } .lime { color: var(--lime) } svg { width: 100%; height: 100% } /* progress bar */ #prog { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: var(--lime); z-index: 130; box-shadow: 0 0 12px rgba(229, 248, 44, .7) } /* buttons */ .cta-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center } .btn { padding: 16px 32px; border-radius: 3px; font-weight: 800; font-size: 14px; text-transform: uppercase; letter-spacing: .04em; transition: transform .15s, box-shadow .2s; cursor: pointer; border: none; display: inline-block; will-change: transform; margin-top: 15px } .btn-p { background: var(--lime); color: #000 } .btn-p:hover { box-shadow: 0 10px 30px rgba(229, 248, 44, .35) } .btn-g { border: 1px solid #2b2b30; color: var(--blanc); background: transparent } .btn-g:hover { border-color: var(--lime); color: var(--lime) } .rating { display: flex; align-items: center; gap: 12px; margin-top: 28px; font-size: 13px; color: var(--gris) } .stars { color: var(--lime); letter-spacing: 2px } /* generic section titles */ .sec { padding: clamp(70px, 10vw, 120px) 0; position: relative } .eyb { font-size: 11.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--lime); margin-bottom: 14px } .h2 { font-size: clamp(34px, 5.2vw, 60px); margin-bottom: 16px } .lead { color: #c2c2be; font-size: clamp(15px, 1.2vw, 18px); max-width: 560px; line-height: 1.55 } /* Boutique dev/prod : les elements marques .shop-gate (icone panier, panier deroulant, bloc d'achat) sont masques par defaut et ne s'affichent que quand porte la classe .shop-on, ajoutee en JS selon le domaine (voir partials/head.html.j2 pour la liste des domaines "dev"). */ html:not(.shop-on) .shop-gate { display: none !important } /* Gate inverse : .shop-gate-off (bloc "boutique bientot disponible") ne s'affiche QUE quand la boutique est masquee, donc l'oppose exact de .shop-gate. Les deux blocs coexistent toujours dans le HTML ; seul le CSS decide lequel des deux le visiteur voit, selon le domaine. */ html.shop-on .shop-gate-off { display: none !important } /* scroll reveal */ .reveal { opacity: 0; transform: translateY(34px); transition: opacity .7s ease, transform .7s cubic-bezier(.22, 1, .36, 1) } .reveal.in { opacity: 1; transform: none } /* page fade-in (SPA-style routing) */ .pageview { animation: fadein .5s ease } @keyframes fadein { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }