/* ============================================================
   vx.jimmy — direction artistique : sobre & premium
   Noir profond, blanc, un seul accent bleu, typo Geist,
   beaucoup d'espace. Le projet à venir passe en premier.
   ============================================================ */

:root{
  /* couleurs */
  --bg:       #08090b;
  --text:     #f5f6f7;
  --text-2:   rgba(245,246,247,.66);
  --text-3:   rgba(245,246,247,.5);   /* contraste ≥ 4,5:1 sur --bg */
  --line:     rgba(255,255,255,.08);
  --line-2:   rgba(255,255,255,.14);
  --surface:  rgba(255,255,255,.035);
  --accent:   #7b93ff;                /* le seul accent — contraste 7:1 sur --bg */
  --accent-a: 123,147,255;            /* le même, pour les transparences */

  --radius: 20px;
  --col: 29rem;
  --page-px: 20px;
  color-scheme: dark;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
[hidden]{ display:none !important; }

html{ -webkit-text-size-adjust:100%; -webkit-tap-highlight-color:transparent; }

body{
  min-height:100svh;
  background:
    radial-gradient(70% 45% at 50% -8%, rgba(var(--accent-a), .13), transparent 70%),
    var(--bg);
  background-attachment:fixed;
  color:var(--text);
  font-family:"Geist", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size:15px;
  line-height:1.5;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; }

.visually-hidden{
  position:absolute; width:1px; height:1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;
}

:focus-visible{ outline:2px solid rgba(var(--accent-a), .7); outline-offset:3px; }

/* ============================================================
   PAGE
   ============================================================ */
.page{
  width:100%;
  max-width:var(--col);
  min-height:100svh;
  margin-inline:auto;
  padding:max(18px, env(safe-area-inset-top)) var(--page-px) max(24px, env(safe-area-inset-bottom));
  display:flex; flex-direction:column;
}

/* ---------- entrée en douceur ---------- */
.rise{
  animation:rise .9s cubic-bezier(.2,.7,.2,1) backwards;
  animation-delay:calc(var(--i) * 80ms + 120ms);
}
@keyframes rise{
  from{ opacity:0; transform:translateY(10px); }
  to  { opacity:1; transform:none; }
}

/* ---------- profil ---------- */
.top{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.who{ display:flex; align-items:center; gap:12px; min-width:0; }
.who__photo{
  width:44px; height:44px;
  border-radius:50%;
  object-fit:cover;
  box-shadow:0 0 0 1px var(--line-2), 0 0 0 4px var(--bg), 0 0 0 5px rgba(var(--accent-a), .35);
  cursor:pointer;
}
.who__text{ display:flex; flex-direction:column; min-width:0; line-height:1.25; }
.who__text strong{ font-size:15px; font-weight:600; letter-spacing:-.01em; }
.who__text span{ font-size:13px; color:var(--text-3); }

.share{
  display:inline-flex; align-items:center; gap:7px;
  height:36px; padding:0 14px 0 12px;
  border-radius:999px;
  border:1px solid var(--line-2);
  background:var(--surface);
  font-size:13px; font-weight:500;
  color:var(--text-2);
  cursor:pointer;
  transition:color .25s ease, border-color .25s ease, background-color .25s ease;
}
.share svg{ width:15px; height:15px; }
.share:hover{ color:var(--text); border-color:rgba(255,255,255,.24); background:rgba(255,255,255,.06); }

/* ---------- accroche ---------- */
.hero{ margin-top:clamp(40px, 9vh, 76px); }

.badge{
  display:inline-flex; align-items:center; gap:8px;
  height:28px; padding:0 12px 0 10px;
  border-radius:999px;
  border:1px solid rgba(var(--accent-a), .28);
  background:rgba(var(--accent-a), .08);
  font-size:12.5px; font-weight:500;
  color:var(--text);
}
.badge i{
  position:relative;
  width:7px; height:7px; border-radius:50%;
  background:var(--accent);
}
.badge i::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  border:1px solid var(--accent);
  animation:ping 2.4s cubic-bezier(.2,.6,.3,1) infinite;
}
@keyframes ping{
  0%      { transform:scale(1);   opacity:.9; }
  70%,100%{ transform:scale(2.6); opacity:0;  }
}

.title{
  margin-top:18px;
  font-size:clamp(32px, 9vw, 42px);
  font-weight:600;
  line-height:1.06;
  letter-spacing:-.04em;
  text-wrap:balance;
}
.lead{
  margin-top:14px;
  max-width:26rem;
  font-size:16px;
  color:var(--text-2);
  text-wrap:pretty;
}

/* ============================================================
   LE PROJET — élément principal
   ============================================================ */
.launch{
  position:relative;
  display:flex; flex-direction:column;
  margin-top:30px;
  padding:22px;
  border-radius:var(--radius);
  border:1px solid rgba(var(--accent-a), .26);
  background:
    radial-gradient(110% 120% at 0% 0%, rgba(var(--accent-a), .16), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
  box-shadow:0 30px 60px -36px rgba(var(--accent-a), .45);
  overflow:hidden;
  isolation:isolate;
  transition:border-color .3s ease, transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s ease;
}
/* reflet discret qui traverse la carte au survol */
.launch::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(105deg, transparent 30%, rgba(255,255,255,.07) 45%, transparent 60%);
  transform:translateX(-100%);
  transition:transform .9s cubic-bezier(.2,.7,.2,1);
}
.launch:hover{ border-color:rgba(var(--accent-a), .5); transform:translateY(-2px); box-shadow:0 34px 70px -34px rgba(var(--accent-a), .6); }
.launch:hover::before{ transform:translateX(100%); }
.launch:active{ transform:translateY(0); }

.launch__top{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.launch__label{
  font-size:12px; font-weight:500;
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--accent);
}
.launch__state{
  display:inline-flex; align-items:center; gap:7px;
  font-size:12.5px; color:var(--text-2);
}
.launch__state i{
  width:6px; height:6px; border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 10px rgba(var(--accent-a), .9);
  animation:glow 2.4s ease-in-out infinite;
}
@keyframes glow{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }

.launch__title{
  margin-top:14px;
  font-size:30px; font-weight:600;
  letter-spacing:-.035em; line-height:1.1;
}
.launch__sub{ margin-top:8px; font-size:14px; color:var(--text-2); }

.launch__cta{
  display:flex; align-items:center; justify-content:center; gap:8px;
  height:50px; margin-top:20px;
  border-radius:14px;
  background:var(--text);
  color:var(--bg);
  font-size:15px; font-weight:600;
  letter-spacing:-.01em;
  transition:background-color .25s ease;
}
.launch__cta svg{ width:16px; height:16px; transition:transform .35s cubic-bezier(.2,.7,.2,1); }
.launch:hover .launch__cta{ background:#fff; }
.launch:hover .launch__cta svg{ transform:translateX(3px); }

/* ============================================================
   LES AUTRES LIENS — regroupés
   ============================================================ */
.links{
  margin-top:14px;
  display:flex; flex-direction:column;
  border-radius:var(--radius);
  border:1px solid var(--line);
  background:var(--surface);
  overflow:hidden;
}
.link{
  position:relative;
  display:flex; align-items:center; gap:14px;
  width:100%;
  padding:14px 16px;
  text-align:left;
  cursor:pointer;
  transition:background-color .2s ease;
}
.link + .link{ border-top:1px solid var(--line); }
.link:hover{ background:rgba(255,255,255,.04); }
.link:focus-visible{ outline-offset:-3px; }

.link__icon{
  flex:none;
  display:grid; place-items:center;
  width:40px; height:40px;
  border-radius:12px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.04);
  color:var(--text-2);
  transition:color .2s ease, border-color .2s ease;
}
.link__icon svg{ width:19px; height:19px; }
.link:hover .link__icon{ color:var(--text); border-color:var(--line-2); }

.link__text{ min-width:0; flex:1; display:flex; flex-direction:column; gap:1px; }
.link__title{ font-size:15px; font-weight:500; letter-spacing:-.01em; }
.link__sub{
  font-size:13px; color:var(--text-3);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

.link__arrow{
  flex:none; width:15px; height:15px;
  color:var(--text-3);
  transition:color .2s ease, transform .3s cubic-bezier(.2,.7,.2,1);
}
.link:hover .link__arrow{ color:var(--text); transform:translate(2px,-2px); }

.link__copy{
  flex:none;
  height:26px; padding:0 10px;
  display:inline-flex; align-items:center;
  border-radius:999px;
  border:1px solid var(--line-2);
  font-size:12px; font-weight:500;
  color:var(--text-2);
  transition:color .2s ease, border-color .2s ease, background-color .2s ease;
}
.link:hover .link__copy{ color:var(--text); }
.link.is-copied .link__copy{
  color:var(--text);
  border-color:rgba(var(--accent-a), .5);
  background:rgba(var(--accent-a), .14);
}

/* ---------- pied de page ---------- */
.foot{
  margin-top:auto;
  padding-top:36px;
  text-align:center;
  font-size:12px;
  color:var(--text-3);
}

/* ============================================================
   PARTAGER
   ============================================================ */
.sheet{
  margin:auto;
  width:min(320px, calc(100vw - 40px));
  padding:22px;
  border-radius:24px;
  color:var(--text);
  background:#101114;
  border:1px solid var(--line-2);
  box-shadow:0 40px 90px -24px rgba(0,0,0,.9);
  text-align:center;
}
.sheet[open]{ animation:sheet-in .4s cubic-bezier(.2,.7,.2,1); }
.sheet::backdrop{
  background:rgba(4,5,7,.7);
  -webkit-backdrop-filter:blur(6px);
          backdrop-filter:blur(6px);
}
@keyframes sheet-in{
  from{ opacity:0; transform:translateY(10px) scale(.98); }
  to  { opacity:1; transform:none; }
}
.sheet__close{
  position:absolute; top:12px; right:12px;
  width:30px; height:30px;
  display:grid; place-items:center;
  border-radius:50%;
  color:var(--text-3);
  cursor:pointer;
  transition:color .2s ease, background-color .2s ease;
}
.sheet__close svg{ width:13px; height:13px; }
.sheet__close:hover{ color:var(--text); background:rgba(255,255,255,.06); }

.sheet__title{ font-size:18px; font-weight:600; letter-spacing:-.02em; }
.sheet__qr{
  margin:18px auto 0;
  width:196px; height:196px;
  padding:12px;
  border-radius:16px;
  background:#fff;                           /* fond blanc : le QR reste lisible */
}
.sheet__qr canvas{ width:100%; height:100%; image-rendering:pixelated; border-radius:4px; }
.sheet__qr[hidden] + .sheet__hint{ margin-top:16px; }
.sheet__hint{ margin-top:12px; font-size:13px; color:var(--text-3); }
.sheet__copy{
  margin-top:16px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  width:100%;
  height:46px; padding:0 8px 0 14px;
  border-radius:12px;
  border:1px solid var(--line-2);
  background:var(--surface);
  font-size:14px;
  cursor:pointer;
  transition:border-color .2s ease;
}
.sheet__copy:hover{ border-color:rgba(255,255,255,.24); }
.sheet__url{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text-2); }
.sheet__copy .chip__state{
  flex:none;
  height:30px; padding:0 12px;
  display:inline-flex; align-items:center;
  border-radius:8px;
  background:var(--text); color:var(--bg);
  font-size:12.5px; font-weight:600;
}
.sheet__copy.is-copied .chip__state{ background:var(--accent); color:#0b0d14; }

/* ============================================================
   EASTER EGG
   ============================================================ */
.toast{
  position:fixed; z-index:7;
  left:50%; bottom:max(28px, env(safe-area-inset-bottom));
  padding:10px 16px;
  border-radius:999px;
  font-size:14px; font-weight:500;
  color:var(--text);
  background:rgba(16,17,20,.92);
  border:1px solid rgba(var(--accent-a), .35);
  box-shadow:0 0 40px -10px rgba(var(--accent-a), .6);
  white-space:nowrap;
  pointer-events:none;
  opacity:0;
  transform:translate(-50%, 10px);
  transition:opacity .4s ease, transform .4s cubic-bezier(.2,.7,.2,1);
}
.toast.is-on{ opacity:1; transform:translate(-50%, 0); }
body.is-secret .launch{
  border-color:rgba(var(--accent-a), .8);
  box-shadow:0 0 0 1px rgba(var(--accent-a), .4), 0 30px 90px -20px rgba(var(--accent-a), .9);
}
body.is-secret .launch::before{ transform:translateX(100%); }

/* ============================================================
   ACCESSIBILITÉ
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    animation-delay:0s !important;
    transition-duration:.001ms !important;
  }
}