:root{
  color-scheme:dark;
  --night:#050505;
  --white:#fff;
  --secondary:#f0f0f0;
  --muted:rgba(255,255,255,.68);
  --overlay-strength:.52; /* Ajuster autour de .50 selon le média définitif. */
  --display:"Archivo Black","Instrument Sans",Arial,Helvetica,sans-serif;
  --sans:"Instrument Sans",Arial,Helvetica,sans-serif;
  --serif:"Roboto Serif",Georgia,"Times New Roman",serif
}

*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;background:var(--night);color:var(--white)}
body{overflow:hidden;font-family:var(--sans)}
a{color:inherit}

.waiting-card{
  position:relative;isolation:isolate;width:100%;height:100vh;height:100svh;min-height:100svh;
  display:grid;place-items:center;overflow:hidden;padding:max(24px,env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left))
}
.background,.background-poster,.background-video,.background-overlay{position:absolute;inset:0;width:100%;height:100%}
.background{z-index:-1;background:var(--night)}
.background-poster{
  background:var(--night) url("assets/images/coming-soon-poster.jpg") center center/cover no-repeat
}
.background-video{object-fit:cover;border:0}
.background-overlay{background:rgba(0,0,0,var(--overlay-strength))}

.content{width:min(96vw,1800px);text-align:center}
.identity-name{
  margin:0;display:flex;justify-content:center;align-items:baseline;gap:.23em;
  font:400 clamp(42px,7.15vw,142px)/.9 var(--display);
  letter-spacing:-.055em;text-transform:uppercase;white-space:nowrap;text-wrap:nowrap
}
.identity-role{
  margin:clamp(16px,2vw,30px) 0 0;
  font:250 clamp(12px,1.45vw,25px)/1.25 var(--serif);
  letter-spacing:.045em;text-transform:uppercase;color:var(--secondary)
}
.coming-soon{
  margin:clamp(56px,9vh,108px) 0 0;
  font:400 clamp(13px,1.15vw,18px)/1.3 var(--serif);letter-spacing:.035em;color:var(--muted)
}
.contact{margin-top:clamp(32px,5vh,58px);display:flex;flex-direction:column;align-items:center;gap:20px}
.email{
  padding:4px 0 7px;border-bottom:1px solid rgba(255,255,255,.46);
  font:500 clamp(11px,.92vw,14px)/1.2 var(--sans);letter-spacing:.055em;text-decoration:none
}
.socials{display:flex;align-items:center;justify-content:center;gap:17px}
.social-link{
  display:grid;place-items:center;width:25px;height:25px;color:rgba(255,255,255,.62);
  text-decoration:none
}
.social-link svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.45}
.social-link .social-fill{fill:currentColor;stroke:none}
.social-link .social-dot{fill:currentColor;stroke:none}
.email:focus-visible,.social-link:focus-visible{
  outline:2px solid var(--white);outline-offset:7px;border-bottom-color:transparent
}
.visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0
}

@media(max-width:720px) and (orientation:portrait){
  .content{width:min(92vw,560px)}
  .identity-name{
    width:clamp(272px,88vw,560px);max-width:calc(100vw - 48px);margin-inline:auto;
    flex-direction:column;align-items:center;gap:.035em;
    font-size:clamp(28px,8.9vw,54px);line-height:clamp(.84em,7.7vw,.88em);
    letter-spacing:clamp(-.055em,-.4vw,-.04em)
  }
  .identity-role{
    max-width:82vw;margin-inline:auto;margin-top:clamp(16px,4.5vw,24px);
    font-size:clamp(11px,2.8vw,14px);line-height:1.5;letter-spacing:.04em
  }
  .coming-soon{margin-top:clamp(50px,8.5svh,78px)}
}

@media(max-height:500px) and (orientation:landscape){
  .waiting-card{padding-block:max(18px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-bottom))}
  .content{width:min(94vw,1300px)}
  .identity-name{
    width:min(82vw,680px);margin-inline:auto;flex-direction:column;align-items:center;gap:.025em;
    font-size:clamp(30px,6.35vw,54px);line-height:clamp(.82em,5.2vw,.86em);
    letter-spacing:clamp(-.055em,-.3vw,-.04em)
  }
  .identity-role{
    max-width:76vw;margin-inline:auto;margin-top:clamp(10px,3svh,15px);
    font-size:clamp(10px,1.45vw,13px);line-height:1.35;letter-spacing:.04em
  }
  .coming-soon{margin-top:clamp(25px,7svh,38px)}
  .contact{margin-top:clamp(18px,4.5svh,28px);flex-direction:row;justify-content:center;gap:24px}
}

@media(hover:hover) and (pointer:fine){
  .social-link:hover{color:var(--white)}
}

@media(prefers-reduced-motion:reduce){
  .background-video{display:none}
}