/* ============================================================ Base — reset, éléments globaux, utilitaires et animations réutilisables (boutons, conteneur, « kicker », révélations). ============================================================ */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { background: var(--cream); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; } a { color: inherit; text-decoration: none; } ::selection { background: var(--accent); color: #fff; } /* --- Utilitaires --- */ .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); } .kick { font-family: var(--sans); text-transform: uppercase; letter-spacing: .2em; font-size: 12px; font-weight: 600; color: var(--accent-deep); } /* --- Boutons --- */ .btn { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; padding: 14px 22px; border-radius: 14px; transition: .24s; cursor: pointer; border: 1.5px solid var(--ink); } .btn .arw { transition: transform .24s; } .btn:hover .arw { transform: translateX(4px); } .btn.fill { background: var(--accent); border-color: var(--accent); color: #fff; } .btn.fill:hover { background: var(--accent-deep); border-color: var(--accent-deep); } .btn.ghost:hover { background: var(--ink); color: var(--cream); } /* --- Révélations au scroll --- État de repos VISIBLE par défaut : si le JS échoue ou si l'utilisateur préfère réduire les animations, tout le contenu reste affiché. L'animation n'est armée que lorsque le JS ajoute la classe `anim` sur . */ .rv { opacity: 1; transform: none; } @media (prefers-reduced-motion: no-preference) { html.anim .rv { opacity: 0; transform: translateY(28px); transition: opacity .8s ease, transform .8s cubic-bezier(.2, .7, .1, 1); } html.anim .rv.in { opacity: 1; transform: none; } html.anim .rv.d1 { transition-delay: .1s; } html.anim .rv.d2 { transition-delay: .2s; } html.anim .rv.d3 { transition-delay: .3s; } }