/* ─── Reset & base ───────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } p { margin: 0; text-wrap: pretty; } a { color: inherit; } /* Contenu réservé aux lecteurs d'écran et aux moteurs de recherche. */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } button { font-family: inherit; } ul, ol { margin: 0; padding: 0; } ::selection { background: var(--accent); color: var(--ink); } /* ─── Body ───────────────────────────────────────────────────────────────── */ body { background: var(--bg); color: var(--ink); font-family: Verdana, Geneva, Tahoma, sans-serif; font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; /* Grain de papier ancien */ background-image: radial-gradient(ellipse 90% 60% at 50% 0%, rgba(200,235,250,0.45) 0%, transparent 70%), radial-gradient(ellipse 100% 80% at 50% 100%, rgba(15,70,100,0.08) 0%, transparent 60%), url("data:image/svg+xml;utf8,"); background-attachment: fixed, fixed, fixed; background-size: auto, auto, 220px 220px; } #app { min-height: 100vh; } /* ─── Typographie ────────────────────────────────────────────────────────── */ h1, h2, h3, h4, .serif { font-family: 'Caveat', cursive; font-weight: 500; letter-spacing: -0.01em; line-height: 1.05; margin: 0; text-wrap: balance; } /* ─── Animations ─────────────────────────────────────────────────────────── */ @keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } @keyframes fade { from { opacity: 0; } to { opacity: 1; } } @keyframes slowZoom { from { transform: scale(1.0); } to { transform: scale(1.08); } } @keyframes dropFade { from { opacity: 0; transform: translateY(-6px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes dropItem { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: translateX(0); } } /* ─── Reveal au scroll ───────────────────────────────────────────────────── */ /* Ces blocs ne sont masqués que si JavaScript est actif (classe « js » posée dans le ). Sans JS — et sur le HTML pré-rendu avant hydratation — le contenu reste visible au lieu de rester à opacity: 0. */ .js .reveal { opacity: 0; transform: translateY(18px); transition: opacity 900ms cubic-bezier(.2,.7,.2,1), transform 900ms cubic-bezier(.2,.7,.2,1); } .js .reveal.in { opacity: 1; transform: none; } /* ─── Transition de page ─────────────────────────────────────────────────── */ main { animation: fadeUp 600ms cubic-bezier(.2,.7,.2,1) both; } /* ─── Animations supplémentaires ────────────────────────────────────────── */ @keyframes floatY { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-8px); } } @keyframes glowPulse { 0%, 100% { opacity: 0.04; } 50% { opacity: 0.10; } } @keyframes shimmer { from { background-position: -200% center; } to { background-position: 200% center; } } /* ─── Variantes de reveal au scroll ─────────────────────────────────────── */ .js .reveal-left { opacity: 0; transform: translateX(-28px); transition: opacity 900ms cubic-bezier(.2,.7,.2,1), transform 900ms cubic-bezier(.2,.7,.2,1); } .js .reveal-left.in { opacity: 1; transform: none; } .js .reveal-right { opacity: 0; transform: translateX(28px); transition: opacity 900ms cubic-bezier(.2,.7,.2,1), transform 900ms cubic-bezier(.2,.7,.2,1); } .js .reveal-right.in { opacity: 1; transform: none; } .js .reveal-scale { opacity: 0; transform: scale(0.97); transition: opacity 820ms cubic-bezier(.2,.7,.2,1), transform 820ms cubic-bezier(.2,.7,.2,1); } .js .reveal-scale.in { opacity: 1; transform: scale(1); } /* ─── Stagger décalage pour enfants d'un conteneur reveal ───────────────── */ .stagger > *:nth-child(1) { transition-delay: 0ms !important; } .stagger > *:nth-child(2) { transition-delay: 110ms !important; } .stagger > *:nth-child(3) { transition-delay: 220ms !important; } .stagger > *:nth-child(4) { transition-delay: 330ms !important; } .stagger > *:nth-child(5) { transition-delay: 440ms !important; }