/* ============================================================= DOPAMI — Base Reset, sol texture, echelle d'encre, utilitaires de mise en page. Chargee globalement par layout.njk, apres tokens.css. ============================================================= */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-height) + 24px); } [hidden] { display: none !important; } body { position: relative; font-family: var(--dop-font-body); font-size: var(--dop-fs-body); line-height: var(--dop-lh-relaxed); color: var(--dop-ink-1); background: var(--dop-bg); -webkit-font-smoothing: antialiased; overflow-x: hidden; } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; } h1, h2, h3, h4 { font-family: var(--dop-font-display); font-weight: 800; letter-spacing: var(--dop-tracking-tight); margin: 0; } ::selection { background: rgba(221, 75, 149, 0.32); color: #fff; } ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: var(--dop-bg); } ::-webkit-scrollbar-thumb { background: var(--dop-primary); border-radius: 3px; } :focus-visible { outline: 2px solid var(--dop-primary); outline-offset: 3px; border-radius: 4px; } /* ---------- Sol texture ---------- Un seul sol pour toute la page: degrade radial, puis un marbre en soft-light et un grain fin en overlay. Les deux couches sont fixes et derriere le contenu, donc elles ne repeignent pas au scroll. Le bruit est genere en SVG inline: aucun fichier image a telecharger. */ body::before, body::after { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; } body::before { background: radial-gradient(120% 90% at 50% 0%, var(--dop-bg-radial-in) 0%, var(--dop-bg-radial-out) 100%); } body::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.006' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E"); mix-blend-mode: soft-light; opacity: .18; } /* Le grain est porte par un troisieme calque sur
pour ne pas consommer un pseudo-element de plus sur body. */ main { position: relative; display: block; } main::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); mix-blend-mode: overlay; opacity: .055; } /* ---------- Mise en page ---------- */ .wrap { width: 100%; max-width: 1360px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 48px); } .pad { padding: clamp(64px, 9vw, 128px) 0; } /* Les sections se separent par un filet et du blanc, jamais par une alternance de fonds. .bg2 est neutralisee: elle reste declaree parce que les pages pas encore refondues l'utilisent encore. */ .bg2 { background: transparent; } .rule { border: 0; border-top: 1px solid var(--dop-rule); margin: 0; } /* ---------- Echelle d'encre ---------- */ .ink-1 { color: var(--dop-ink-1); } .ink-2 { color: var(--dop-ink-2); } .ink-3 { color: var(--dop-ink-3); } /* ---------- Reveal au defilement ---------- Le garde .js est pose par un script en tete de . Sans lui, le contenu reste visible: le hero ne depend donc pas de l'execution du JavaScript pour s'afficher, et le LCP n'attend pas l'observer. */ .js .reveal, .js .rv { opacity: 0; transform: translateY(30px); transition: opacity .7s ease, transform .7s ease; } .js .reveal.visible, .js .rv.visible { opacity: 1; transform: none; } /* ---------- Mouvement ---------- Etendu a tout le site: c'etait gere seulement dans index.css et beta.css. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }