/* ========================================================================== BASE — variables, reset, typographie, éléments génériques (boutons, titres de section, animations de reveal). Chargé sur toutes les pages. NOUVEAU DESIGN (2026-07) : noir/blanc + une couleur tonique par page. On garde volontairement les MEMES noms de variables qu'avant (--lime, --noir, --blanc, --disp, etc.) pour ne rien casser dans les CSS non encore repris (produit.css, saveurs.css, forms.css, faq.css, legal.css, blog.css, instagram.css, hero.css) : ils utilisent tous var(--lime) comme couleur d'accent, donc la reecrire par page via body[data-tone] suffit a propager la couleur tonique partout, sans toucher a ces fichiers. Police body : Archivo (remplace Inter) — impacte TOUT le site. ========================================================================== */ :root { --noir: #050506; --noir2: #0e0e11; --card: #131318; --lime: #D7F520; --lime2: #8FD117; --blanc: #fff; --gris: #9a9aa2; --ligne: rgba(255, 255, 255, .12); --orange: #FF6A1A; --green: #9EE04B; --blue: #2E6BE0; --pink: #E81E86; --red: #E62636; --purple: #9333EA; --brown: #B57B32; --pale: #E9D24A; --disp: 'Anton', 'Arial Narrow', Impact, sans-serif; --util: 'Archivo Narrow', 'Archivo', sans-serif; /* angle d'inclinaison des pastilles/boutons de la maquette (pill, tabs, badges de saveur...). Utilise uniquement sur les composants des pages produit pour l'instant (voir css/buybox.css) — pas applique aux .btn du reste du site pour ne pas modifier des pages non revues. */ --shift: -11deg; } /* couleur tonique par page — palette validee le 2026-07-31. home reste la valeur par defaut ci-dessus (#D7F520). */ body[data-tone="marque"] { --lime: #FF5A36; --lime2: #D6431F; } body[data-tone="usages"] { --lime: #3BA7FF; --lime2: #1C7FE0; } body[data-tone="revendeurs"] { --lime: #4D7CFF; --lime2: #2B58E0; } body[data-tone="blog"] { --lime: #B490FF; --lime2: #9264F5; } body[data-tone="contact"] { --lime: #FF6FA8; --lime2: #E8407F; } body[data-tone="faq"] { --lime: #57E6C9; --lime2: #2FBFA3; } /* pages produit : couleur par defaut avant selection de saveur (ensuite changee en JS au clic sur une saveur, voir partials/shopify_buybox_single.html.j2) */ body[data-tone="energy-pouch"] { --lime: #3BD97F; --lime2: #1FA85C; } body[data-tone="energy-shot"] { --lime: #FFC93D; --lime2: #E0A100; } * { margin: 0; padding: 0; box-sizing: border-box } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; background: var(--noir); } /* --lime/--lime2 enregistrees en tant que (Houdini @property) pour pouvoir les transitionner en douceur : la transition posee sur se propage automatiquement a TOUS les usages de var(--lime)/var(--lime2) dans la page (boutons, bandeau .marq, prix, bordures...) sans avoir a ajouter une transition sur chaque regle individuellement. Utilise par le changement de couleur tonique au clic sur une saveur (voir partials/shopify_buybox_single.html.j2). */ @property --lime { syntax: ''; inherits: true; initial-value: #D7F520; } @property --lime2 { syntax: ''; inherits: true; initial-value: #8FD117; } body { background: var(--noir); color: var(--blanc); font-family: 'Archivo', system-ui, -apple-system, 'Helvetica Neue', sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; transition: --lime .75s ease, --lime2 .75s ease } .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 color-mix(in srgb, var(--lime) 70%, transparent) } /* buttons — inclines comme la maquette originelle (voir --shift) */ .cta-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center } .btn { display: inline-block; background: var(--lime); color: #050506; font-family: var(--util); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; padding: 15px 32px; font-size: .88rem; border-radius: 3px; border: 1px solid transparent; cursor: pointer; margin-top: 15px; transform: skewX(var(--shift)); transition: transform .18s, filter .18s } .btn:hover { filter: brightness(1.12); transform: skewX(var(--shift)) translateY(-2px) } .btn-g { border: 1px solid #2b2b30; color: var(--blanc); background: transparent } /* .btn-g est transparent : le filter/brightness du hover generique ne se voit pas dessus, on lui donne son propre retour visuel (bordure + texte lime), meme logique que .ig-sec .btn:hover */ .btn-g:hover { border-color: var(--lime); color: var(--lime) } .btn--block { width: 100%; text-align: center } .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(64px, 9vw, 112px) 0; position: relative } .sec--alt { background: #0b0b0e; border-top: 1px solid var(--ligne); border-bottom: 1px solid var(--ligne) } .eyb { font-family: var(--util); font-size: 11.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--lime); margin-bottom: 14px } .h2 { font-size: clamp(34px, 5.2vw, 60px); font-weight: 400; line-height: .94; margin: 0 } .lead { color: #c2c2be; font-size: clamp(15px, 1.2vw, 18px); max-width: 560px; line-height: 1.55 } .muted { color: var(--gris) } /* 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"). NE PAS MODIFIER cette mecanique — seul l'habillage visuel change. */ 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 } }