/* Accueil de Re:Naissance : un seul écran, sans défilement. Toutes les tailles en unités --u (1u = 1 pixel du rendu de
   référence 1563 x 1006), pour que la composition grandisse et rétrécisse d'un seul bloc. */
@font-face { font-family: "Kroftsmann"; src: url("fonts/kroftsmann.woff2") format("woff2"); font-display: block; }
@font-face { font-family: "Montserrat"; src: url("fonts/montserrat-400.woff2") format("woff2"); font-weight: 400; font-display: block; }
@font-face { font-family: "Montserrat"; src: url("fonts/montserrat-600.woff2") format("woff2"); font-weight: 600; font-display: block; }
@font-face { font-family: "Montserrat"; src: url("fonts/montserrat-700.woff2") format("woff2"); font-weight: 700; font-display: block; }

:root{
  --u: max( min(calc(100vw / 1563), calc(100vh / 460)), 0.80px );
  --ink:#ffffff; --ink-mark:rgba(255,255,255,.98); --ink-nav:rgba(255,255,255,.91);
  --ink-sub:rgba(255,255,255,.50); --ink-pill:rgba(255,255,255,.88); --ink-dark:#000000;
  --hairline:rgba(255,255,255,.98); --glass-bg:rgba(255,255,255,.12); --glass-line:rgba(255,255,255,.15);
  --r-btn: calc(10 * var(--u));
  --texte: "Montserrat","Helvetica Neue",Arial,system-ui,sans-serif;
  --titre: "Kroftsmann","Montserrat","Helvetica Neue",Arial,sans-serif;
}
@supports (height:100dvh){ :root{ --u: max( min(calc(100vw / 1563), calc(100dvh / 460)), 0.80px ); } }
@supports not (width: max(1px,1vw)){ :root{ --u: calc(100vw / 1563); } }

*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0; background:#000; color:#fff; overflow:hidden; font-family:var(--texte);
  font-feature-settings:"kern" 1,"calt" 1; -webkit-font-smoothing:antialiased; text-rendering:geometricPrecision;
}
.sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
a:focus-visible, button:focus-visible{ outline:2px solid #9b8cff; outline-offset:3px; border-radius:4px; }

/* calques */
.frame{ position:fixed; inset:0; overflow:hidden; background:#000; isolation:isolate; }
.sky{
  position:absolute; top:calc(-1.5 * var(--u)); left:50%; transform:translateX(-50%);
  width:100%; height:auto; min-height:calc(100% + 1.5 * var(--u));
  object-fit:cover; object-position:center top; z-index:0; pointer-events:none; user-select:none;
}
.veil{ position:absolute; inset:0; z-index:1; pointer-events:none;
  /* le ciel de la cinématique n'est pas noir : un léger voile en haut garde le texte bien lisible */
  background:linear-gradient(to bottom, rgba(0,0,0,.30) 0%, rgba(0,0,0,.18) 40%, rgba(0,0,0,.06) 65%); }
.screen{ position:absolute; top:0; left:50%; transform:translateX(-50%); width:calc(1563 * var(--u)); height:calc(1006 * var(--u)); z-index:2; }
.hero{ position:absolute; left:calc(0.9 * var(--u)); right:calc(-0.9 * var(--u)); top:0; text-align:center; }

/* en-tête */
.bar{ position:absolute; left:calc(50% - 495.5 * var(--u)); top:calc(7.5 * var(--u)); width:calc(983.5 * var(--u)); height:calc(36.2 * var(--u)); z-index:3; }
.brand{
  position:absolute; left:0; top:50%; transform:translateY(-50%);
  display:flex; align-items:center; gap:calc(11.4 * var(--u)); color:var(--ink-mark); text-decoration:none;
}
.brand img{ width:calc(24 * var(--u)); height:calc(24 * var(--u)); display:block; }
.brand span{ font-family:var(--titre); font-size:calc(17.5 * var(--u)); letter-spacing:calc(0.6 * var(--u)); line-height:1; }

.links{ position:absolute; left:calc(353.8 * var(--u)); top:50%; transform:translateY(-50%); display:flex; gap:calc(25.2 * var(--u)); }
.links a{
  font-size:calc(11.9 * var(--u)); font-weight:400; letter-spacing:calc(-0.30 * var(--u)); color:var(--ink-nav);
  white-space:nowrap; text-decoration:none; transition:color .18s ease;
}
.links a:hover{ color:#fff; }

.actions{ position:absolute; right:0; top:0; display:flex; gap:calc(7.8 * var(--u)); }

.btn{
  display:inline-flex; align-items:center; justify-content:center; border-radius:var(--r-btn);
  text-decoration:none; white-space:nowrap; line-height:1; border:0; font-family:var(--texte);
  transition:background-color .18s ease, color .18s ease, border-color .18s ease;
}
.ghost{ background:transparent; color:#fff; border:calc(1 * var(--u)) solid var(--hairline); }
.ghost:hover{ background:rgba(255,255,255,.10); }
.solid{ background:#fff; color:#000; }
.solid:hover{ background:#e9e9ea; }

.bar .btn{ height:calc(36.2 * var(--u)); line-height:calc(36.2 * var(--u)); font-size:calc(11.9 * var(--u)); font-weight:600; letter-spacing:calc(-0.38 * var(--u)); padding:0 calc(14 * var(--u)); }
.bar .ghost{ min-width:calc(85.5 * var(--u)); }
.bar .solid{ min-width:calc(88.2 * var(--u)); font-size:calc(12.15 * var(--u)); letter-spacing:calc(-0.35 * var(--u)); }

.menu{
  display:none; width:calc(36.2 * var(--u)); height:calc(36.2 * var(--u)); border-radius:var(--r-btn);
  border:calc(1 * var(--u)) solid rgba(255,255,255,.35); background:transparent; color:#fff; cursor:pointer; padding:0;
  align-items:center; justify-content:center;
}
.menu svg{ width:55%; height:55%; }
.menu:hover{ background:rgba(255,255,255,.10); }

.sheet{
  display:none; position:absolute; top:calc(100% + 9 * var(--u)); right:0; min-width:calc(210 * var(--u));
  padding:calc(10 * var(--u)); border-radius:calc(14 * var(--u));
  background:rgba(18,18,20,.88); border:calc(1 * var(--u)) solid rgba(255,255,255,.15);
  -webkit-backdrop-filter:blur(calc(18 * var(--u))) saturate(140%); backdrop-filter:blur(calc(18 * var(--u))) saturate(140%);
  box-shadow:0 calc(18 * var(--u)) calc(44 * var(--u)) rgba(0,0,0,.55);
}
.bar[data-open="true"] .sheet{ display:block; }
.sheet a:not(.btn){
  display:block; padding:calc(9 * var(--u)) calc(10 * var(--u)); border-radius:calc(9 * var(--u)); color:var(--ink-nav);
  text-decoration:none; font-size:calc(14 * var(--u)); font-weight:400; letter-spacing:calc(-0.30 * var(--u));
}
.sheet a:not(.btn):hover{ background:rgba(255,255,255,.08); color:#fff; }
.sheet .btn{ display:flex; width:100%; height:calc(38 * var(--u)); margin-top:calc(8 * var(--u)); font-size:calc(14 * var(--u)); font-weight:600; letter-spacing:calc(-0.30 * var(--u)); color:#000; }

/* héros */
.pill{
  position:absolute; top:calc(56 * var(--u)); left:50%; transform:translateX(-50%); margin:0;
  display:inline-flex; align-items:center; height:calc(22.4 * var(--u));
  padding-left:calc(4.0 * var(--u)); padding-right:calc(8.6 * var(--u));
  border-radius:999px; background:var(--glass-bg); border:calc(1 * var(--u)) solid var(--glass-line);
  -webkit-backdrop-filter:blur(calc(10 * var(--u))); backdrop-filter:blur(calc(10 * var(--u))); white-space:nowrap;
}
.chip{
  display:inline-flex; align-items:center; justify-content:center; min-width:calc(33.3 * var(--u)); height:calc(14 * var(--u));
  padding:calc(1.7 * var(--u)) calc(5 * var(--u)) 0; border-radius:999px; background:#fff; color:#000;
  font-size:calc(9.4 * var(--u)); font-weight:700; letter-spacing:calc(0.2 * var(--u)); line-height:1;
}
.pill-label{
  margin-left:calc(5 * var(--u)); position:relative; top:calc(0.5 * var(--u)); color:var(--ink-pill);
  font-size:calc(11.6 * var(--u)); font-weight:400; letter-spacing:calc(-0.30 * var(--u));
  height:calc(22.4 * var(--u)); line-height:calc(22.4 * var(--u));
}

/* le logo du jeu et l'étoile qui respire, comme sur l'ancien site */
.hero h1{ position:absolute; left:0; right:0; top:calc(84 * var(--u)); margin:0; height:calc(220 * var(--u)); }
.hero .etoile{
  position:absolute; left:50%; top:0; width:calc(96 * var(--u)); height:auto; margin-left:calc(-48 * var(--u));
  filter:drop-shadow(0 0 calc(16 * var(--u)) rgba(200,180,255,.55)); animation:respire 5s ease-in-out infinite;
}
@keyframes respire{ 50%{ transform:scale(1.05) rotate(3deg); } }
.hero .logo{
  position:absolute; left:50%; top:calc(96 * var(--u)); width:calc(430 * var(--u)); height:auto; transform:translateX(-50%);
  filter:drop-shadow(0 calc(6 * var(--u)) calc(22 * var(--u)) rgba(0,0,0,.7));
}

.hero .sub{
  position:absolute; left:50%; transform:translateX(calc(-50% + 0.25 * var(--u))); top:calc(322 * var(--u)); margin:0;
  width:calc(820 * var(--u)); font-size:calc(15.7 * var(--u)); font-weight:400; line-height:calc(24 * var(--u));
  letter-spacing:calc(-0.05 * var(--u)); color:rgba(255,255,255,.62);
}

.cta{ position:absolute; left:50%; transform:translateX(-50%); top:calc(368 * var(--u)); display:flex; gap:calc(9.9 * var(--u)); }
.cta .btn{
  height:calc(36.4 * var(--u)); line-height:calc(36.4 * var(--u)); padding:calc(2 * var(--u)) calc(16 * var(--u)) 0;
  font-size:calc(13.3 * var(--u)); font-weight:600; letter-spacing:calc(-0.34 * var(--u));
}
.cta .ghost{ min-width:calc(99.6 * var(--u)); }
.cta .solid{ min-width:calc(130 * var(--u)); }

.copy{
  position:absolute; left:0; right:0; bottom:calc(8 * var(--u)); margin:0; z-index:2; text-align:center;
  font-size:calc(9.5 * var(--u)); color:rgba(255,255,255,.55); letter-spacing:calc(0.2 * var(--u));
}

/* tablette, téléphone */
@media (max-width:1023px){
  :root{ --u: calc(100vw / 900); }
  .bar{ left:4.2vw; width:91.6vw; }
  .links, .bar .actions > .btn{ display:none; }
  .menu{ display:inline-flex; }
}
@media (max-width:640px){
  :root{ --u: calc(100vw / 486); }
  .bar{ left:5.2vw; width:89.6vw; }
  .hero .sub{ width:min(calc(560 * var(--u)), 88vw); line-height:calc(23 * var(--u)); }
  .pill{ padding-right:calc(8 * var(--u)); }
  .hero .logo{ width:calc(400 * var(--u)); }
  .hero .sub{ top:calc(312 * var(--u)); }
  .cta{ top:calc(374 * var(--u)); }
}
@media (max-width:380px){ :root{ --u: calc(100vw / 470); } }
@media (max-width:1023px) and (max-height:520px){ :root{ --u: min(calc(100vw / 900), calc(100vh / 470)); } }
@media (min-aspect-ratio:3/1){
  .sky{ top:auto; bottom:0; height:auto; min-height:0; width:100%; min-width:100%; }
  .veil{ background:linear-gradient(to bottom, rgba(0,0,0,.82) 0%, rgba(0,0,0,.72) 55%, rgba(0,0,0,.18) 100%); }
}

/* animation d'entrée (une seule fois, puis retirée) */
@media (prefers-reduced-motion: no-preference){
  :root{
    --e-reveal: cubic-bezier(.18,.85,.26,1);
    --e-soft:   cubic-bezier(.22,1,.36,1);
    --e-nav:    cubic-bezier(.33,1,.68,1);
    --rise:     calc(10 * var(--u));
    --rise-lg:  calc(13 * var(--u));
  }
  .intro .brand, .intro .links a, .intro .actions > .btn, .intro .actions > .menu,
  .intro .pill, .intro .hero .sub, .intro .cta .btn, .intro .copy{ opacity:0; }
  .intro .hero .etoile, .intro .hero .logo{ opacity:0; }
  .intro .brand, .intro .pill, .intro .hero .sub, .intro .hero .logo, .intro .cta .btn{ will-change:transform,opacity; }

  @keyframes i-rise    { from{ opacity:0; transform:translate3d(0,var(--rise),0); } to{ opacity:1; transform:none; } }
  @keyframes i-rise-cy { from{ opacity:0; transform:translateY(-50%) translate3d(0,var(--rise),0); } to{ opacity:1; transform:translateY(-50%); } }
  @keyframes i-pill    { from{ opacity:0; transform:translateX(-50%) translate3d(0,var(--rise-lg),0) scale(.972); } to{ opacity:1; transform:translateX(-50%); } }
  @keyframes i-sub     { from{ opacity:0; transform:translateX(calc(-50% + 0.25 * var(--u))) translate3d(0,var(--rise-lg),0); } to{ opacity:1; transform:translateX(calc(-50% + 0.25 * var(--u))); } }
  @keyframes i-btn     { from{ opacity:0; transform:translate3d(0,var(--rise-lg),0) scale(.986); } to{ opacity:1; transform:none; } }
  @keyframes i-logo    { from{ opacity:0; transform:translateX(-50%) translate3d(0,var(--rise-lg),0) scale(.97); } to{ opacity:1; transform:translateX(-50%); } }
  @keyframes i-fade    { from{ opacity:0; } to{ opacity:1; } }

  .intro-play .brand{ animation:i-rise-cy .62s var(--e-nav) 0s both; }
  .intro-play .links a:nth-child(1){ animation:i-rise .55s var(--e-nav) .070s both; }
  .intro-play .links a:nth-child(2){ animation:i-rise .55s var(--e-nav) .115s both; }
  .intro-play .links a:nth-child(3){ animation:i-rise .55s var(--e-nav) .160s both; }
  .intro-play .links a:nth-child(4){ animation:i-rise .55s var(--e-nav) .205s both; }
  .intro-play .links a:nth-child(5){ animation:i-rise .55s var(--e-nav) .250s both; }
  .intro-play .actions > .btn, .intro-play .actions > .menu{ animation:i-rise .55s var(--e-nav) .215s both; }
  .intro-play .actions > .ghost{ animation:i-rise .55s var(--e-nav) .160s both; }
  .intro-play .pill{ animation:i-pill .62s var(--e-soft) .26s both; }
  .intro-play .hero .etoile{ animation:i-fade .8s var(--e-soft) .30s both; }
  .intro-play .hero .logo{ animation:i-logo .95s var(--e-reveal) .40s both; }
  .intro-play .hero .sub{ animation:i-sub .70s var(--e-soft) .86s both; }
  .intro-play .cta .btn{ animation:i-btn .62s var(--e-soft) 1.00s both; }
  .intro-play .copy{ animation:i-fade .62s var(--e-soft) 1.07s both; }
}
@media (prefers-reduced-motion: reduce){ *{ transition:none!important; animation:none!important; } }