:root{ --brand: #142241; --white: #FFFFFF; } *{ box-sizing: border-box; } html, body { height: 100%; } body{ margin: 0; font-family: "Josefin Sans", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color: var(--white); background: var(--brand); -webkit-user-select: none; -ms-user-select: none; user-select: none; } /* Fond image + flou + voile sombre */ body::before{ content: ""; position: fixed; inset: 0; background: url("assets/bg.jpg") center / cover no-repeat; filter: blur(8px); transform: scale(1.08); z-index: -2; } body::after{ content: ""; position: fixed; inset: 0; background: rgba(20,34,65,0.8); z-index: -1; } .wrapper{ min-height: 100svh; display: grid; place-content: center; gap: 3.0rem; text-align: center; padding: 2rem; } .logo{ width: clamp(200px, 32vw, 380px); height: auto; display: block; margin-inline: auto; filter: drop-shadow(0 4px 16px rgba(0,0,0,0.25)); will-change: transform, opacity; animation: logo-rise-fade 900ms cubic-bezier(.22,.61,.36,1) 180ms both; } h1{ margin: 0.25rem 0 0.5rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; font-size: clamp(1.25rem, 2.6vw, 2rem); will-change: transform, opacity; animation: text-rise-fade 800ms cubic-bezier(.22,.61,.36,1) 260ms both; } .contact{ margin: 0; font-size: clamp(0.95rem, 2vw, 1.1rem); line-height: 1.6; opacity: 0.95; will-change: transform, opacity; animation: text-rise-fade 800ms cubic-bezier(.22,.61,.36,1) 340ms both; } a{ color: var(--white); text-decoration: underline; text-underline-offset: 3px; } a:hover{ text-decoration-thickness: 2px; } @media (max-width: 420px){ .contact{ line-height: 1.5; } } .site-footer{ position: fixed; left: 0; right: 0; bottom: 0; padding: calc(8px + env(safe-area-inset-bottom)) 16px 10px; text-align: center; font-size: 0.8rem; opacity: 0.75; z-index: 0; /* au-dessus des voiles (-1/-2) */ } .site-footer p{ margin: 0; } /* Animation d'apparition du logo */ @keyframes logo-rise-fade{ from{ opacity: 0; transform: translateY(24px) scale(1.02); } to{ opacity: 1; transform: translateY(0) scale(1); } } /* Animation d'apparition pour le titre et le contact */ @keyframes text-rise-fade{ from{ opacity: 0; transform: translateY(14px); } to{ opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce){ .logo{ animation: logo-fade-only 700ms ease 180ms both; } h1, .contact{ animation: none; } } /* Fade sans mouvement pour les préférences de réduction d’animations */ @keyframes logo-fade-only{ from{ opacity: 0; } to{ opacity: 1; } } /* Forcer l’animation si la classe force-motion est présente sur */ html.force-motion .logo{ animation: logo-rise-fade 900ms cubic-bezier(.22,.61,.36,1) 180ms both !important; } html.force-motion h1{ animation: text-rise-fade 800ms cubic-bezier(.22,.61,.36,1) 260ms both !important; } html.force-motion .contact{ animation: text-rise-fade 800ms cubic-bezier(.22,.61,.36,1) 340ms both !important; }