/*
Theme Name: OwnKeys — Page d’attente
Description: Page d’attente OwnKeys validée, adaptée pour WordPress.
Version: 1.1.2
Author: OwnKeys
*/
:root { --night:#030A1D; --pink:#EC286A; --ivory:#F7F5F1; --slate:#9EA5B1; }
* { box-sizing:border-box; }
html { background:var(--night); }
body { margin:0; min-height:100svh; color:var(--ivory); background:var(--night); font-family:"DM Sans",system-ui,sans-serif; overflow-x:hidden; }
body::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.12; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M0 0H64M0 0V64' fill='none' stroke='%23F7F5F1' stroke-opacity='.2'/%3E%3C/svg%3E"); background-size:64px 64px; }
.page { position:relative; min-height:100svh; display:grid; grid-template-rows:auto 1fr auto; padding:28px clamp(22px,5vw,72px) 24px; }
.topbar,.footer { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.wordmark { letter-spacing:.32em; font:600 12px/1 "Manrope",sans-serif; }
.wordmark span { color:var(--pink); }
.status { display:flex; align-items:center; gap:10px; color:var(--slate); font-size:12px; letter-spacing:.1em; text-transform:uppercase; }
.status::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--pink); box-shadow:0 0 0 5px rgba(236,40,106,.12); }
main { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(280px,.75fr); align-items:center; gap:clamp(36px,7vw,110px); width:min(1180px,100%); margin:auto; padding:64px 0; }
.eyebrow { margin:0 0 20px; color:var(--pink); font:600 12px/1.4 "Manrope",sans-serif; letter-spacing:.18em; text-transform:uppercase; }
h1 { max-width:760px; margin:0; font:500 clamp(48px,7.5vw,96px)/.98 "Manrope",sans-serif; letter-spacing:-.055em; text-wrap:balance; }
h1 em { color:var(--pink); font-style:normal; }
.intro { max-width:620px; margin:28px 0 0; color:#C8CCD4; font-size:clamp(17px,1.8vw,21px); line-height:1.6; }
.actions { display:inline-flex; flex-direction:column; align-items:stretch; gap:13px; margin-top:36px; }
.button { display:inline-flex; align-items:center; gap:12px; min-height:52px; padding:0 22px; border:1px solid var(--pink); background:var(--pink); color:white; text-decoration:none; font-weight:600; transition:.2s ease; }
.button:hover,.button:focus-visible { background:transparent; color:var(--ivory); transform:translateY(-2px); }
.button:focus-visible { outline:2px solid var(--ivory); outline-offset:4px; }
.button svg { width:17px; height:17px; }
.launch { color:var(--slate); font-size:14px; text-align:center; }
.brand-panel { position:relative; display:grid; place-items:center; min-height:460px; }
.logo { position:relative; width:min(370px,78vw); height:auto; display:block; -webkit-mask-image:radial-gradient(ellipse 68% 68% at center,#000 70%,transparent 100%); mask-image:radial-gradient(ellipse 68% 68% at center,#000 70%,transparent 100%); }
.footer { color:#727B8B; font-size:12px; }
@media(max-width:780px) { .page { padding:22px 20px 20px; } .topbar { gap:12px; } .wordmark { letter-spacing:.24em; } .status { flex-shrink:0; gap:8px; font-size:10px; letter-spacing:.07em; white-space:nowrap; } .status::before { width:6px; height:6px; box-shadow:0 0 0 4px rgba(236,40,106,.12); } main { grid-template-columns:1fr; padding:68px 0 44px; gap:34px; } h1 { font-size:clamp(46px,14vw,70px); } .intro { margin-top:22px; } .brand-panel { min-height:280px; order:-1; } .logo { width:min(280px,76vw); } .footer { align-items:flex-end; } }
@media(prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important; transition:none!important; } }