/* -----------------------------------------
   BenTrade — CRITICAL CSS (Above-the-fold)
   But : rendre loader + hero + nav, sans CLS
   ----------------------------------------- */

/* --- Fonts used above-the-fold --- */
@font-face{
  font-family:'Roobert';
  src:url('../assets/fonts/RoobertPRO-Regular.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Roobert';
  src:url('../assets/fonts/RoobertPRO-Medium.woff2') format('woff2');
  font-weight:500;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Roobert-Fallback';
  src:local('Segoe UI'),local('Roboto'),local('Helvetica Neue'),local('Arial');
  font-weight:400;font-style:normal;
  ascent-override:90%;descent-override:22%;line-gap-override:0%;size-adjust:107%;
}

/* Layering pour un cascade stable */
@layer reset, tokens, base, components, utilities;

/* ========== reset (léger, sans risque CLS) ========== */
@layer reset {
  *,*::before,*::after{box-sizing:border-box}
  html:focus-within{scroll-behavior:smooth}
  html,body{height:100%}
  /* pas de text-rendering / font-smoothing global */
  body{margin:0;line-height:1.5}
  img,video{max-width:100%;height:auto}
  button,input,textarea{font:inherit;color:inherit}
  :root{color-scheme:dark}
}


/* ========== tokens (strict minimum au above-the-fold) ========== */
/* ========== tokens (strict minimum au above-the-fold) ========== */
@layer tokens {
  :root{
    --bg-1:#000004;--bg-2:#050709;
    --text-1:#fff;--text-2:rgba(255,255,255,.8);
    --accent:#8b03ff;--blue:#4040e5;
    --border-1:rgba(255,255,255,.1);
    --font-sys:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,Roboto,Helvetica,Arial,sans-serif;
    --font-brand:'Roobert','Roobert-Fallback',var(--font-sys);
    --w-regular:400;--w-medium:500;

    --hero-title:clamp(2.5rem,8vw,6rem);
    --hero-sub:clamp(1rem,2.5vw,1.5rem);
    --hero-subtitle:var(--hero-sub); /* alias */
    --hero-line:1.1;
    --hero-pad:clamp(1rem,5vw,3rem);
    --hero-top:45%;
    --hero-max:1200px;

    --nav-bg:rgba(0,0,4,.8);
    --nav-pad:.75rem 1.5rem;
    --radius-full:50px;
    --header-h:70px;

    --loader-size:clamp(40px,8vw,60px);
    --ease:cubic-bezier(.4,0,.2,1);
    --t-200:.2s;--t-300:.3s;--t-400:.4s;

    /* viewport fiable */
    --vh:1vh;
  }
  @supports(height:1dvh){:root{--vh:1dvh}}
}


/* ========== base ========== */
@layer base {
  body{
    min-height:100vh;
    font-family:var(--font-brand);
    font-weight:var(--w-regular);
    color:var(--text-1);
    background:linear-gradient(135deg,var(--bg-1) 0%,var(--bg-2) 100%);
    overflow-x:hidden;
  }

  /* scrollbars (visuel OK, mais non critique) */
  ::-webkit-scrollbar{width:8px;height:8px}
  ::-webkit-scrollbar-track{background:transparent}
  ::-webkit-scrollbar-thumb{background:rgba(128,128,128,.3);border-radius:4px}
  ::-webkit-scrollbar-thumb:hover{background:rgba(128,128,128,.5)}
}

/* ========== components (loader + nav + hero) ========== */
@layer components {

  /* ===== Initial Loader (full) ===== */
.bentrade-initial-loader{
  position:fixed;inset:0;
  background:linear-gradient(135deg,var(--bg-1) 0%,var(--bg-2) 100%);
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  z-index:9999;pointer-events:none;
  will-change:opacity;contain:layout style paint;
  backface-visibility:hidden;transform:none;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
}

.bentrade-initial-loader__container{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:2rem;
  will-change:auto;
}

.bentrade-initial-loader__spinner{
  position:relative;width:80px;height:80px;border-radius:50%;
  background:none;
  border:4px solid rgba(255,255,255,.15);
  border-top-color:var(--accent,#8b03ff);
  animation:spin .8s linear infinite;
  will-change:auto;
  contain:layout style paint;
}
/* allège les pseudo-éléments du spinner */
.bentrade-initial-loader__spinner::before,
.bentrade-initial-loader__spinner::after{ content:none }

/* keyframes légers (garde aussi bt-spin pour compat si utilisé ailleurs) */
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes bt-spin{to{transform:rotate(360deg)}}

/* data-saver : spinner encore plus léger */
@media (prefers-reduced-data: reduce){
  .bentrade-initial-loader__spinner{
    background:none;
    border:4px solid rgba(255,255,255,.2);
    border-top-color:var(--accent);
    animation: bt-spin .9s linear infinite;
  }
}

  .bentrade-initial-loader__spinner::before{
    content:"";position:absolute;inset:4px;border-radius:50%;
    background:linear-gradient(135deg,var(--bg-1),var(--bg-2));
    z-index:1;
  }
  .bentrade-initial-loader__spinner::after{
    content:"";position:absolute;top:2px;left:50%;
    width:8px;height:8px;background:var(--accent,#8b03ff);border-radius:50%;
    transform:translateX(-50%);box-shadow:0 0 20px var(--accent,#8b03ff);z-index:2;
  }
.bentrade-initial-loader__progress{
  position:relative;width:200px;height:4px;background:rgba(255,255,255,.1);
  border-radius:2px;overflow:hidden;
}

.bentrade-initial-loader__progress-bar{
  position:absolute;inset:0 auto 0 0;height:100%;
  background:linear-gradient(90deg,#8b03ff 0%, #b19cd9 100%);
  border-radius:2px;width:0%;transition:width .3s cubic-bezier(.4,0,.2,1);
}

.bentrade-initial-loader__percentage{
  color:#fff;font-size:18px;font-weight:600;letter-spacing:.5px;opacity:.9;
  font-variant-numeric:tabular-nums;
}

  .bentrade-initial-loader__text{
  color:rgba(255,255,255,.7);font-size:14px;font-weight:400;letter-spacing:.3px;margin-top:.5rem;
}

.bentrade-initial-loader--hiding{
  opacity:0;transform:scale(.95);
  transition:opacity .4s cubic-bezier(.4,0,.2,1),transform .4s cubic-bezier(.4,0,.2,1);
}
.bentrade-initial-loader--hidden{opacity:0;visibility:hidden;pointer-events:none;transform:scale(.9)}

  @keyframes bt-spin{to{transform:rotate(360deg)}}

  /* App states */
  .app-loading{overflow:hidden}
  .app-loading .hero-video{transform:none;will-change:auto}
  .app-loaded .hero-video{will-change:auto}

  /* Masquage rapide de la landing si user déjà auth (optimiste) */
  body.authenticated-user .site-header,
  body.authenticated-user .section-hero { display:none !important; }
  body.authenticated-user .bentrade-initial-loader__text::after { content:' Redirection vers le live...'; }
  body.authenticated-user .bentrade-initial-loader{
    background:linear-gradient(135deg,#000004 0%,#050709 100%);
  }

  /* HERO + NAV (above the fold) */
  .site-header{min-height:calc(var(--vh)*100);width:100%}
  .section-hero{position:relative;width:100%;min-height:calc(var(--vh)*100);overflow:hidden}
  .hero-content{
    position:absolute;top:var(--hero-top);left:50%;transform:translate(-50%,-50%);
    z-index:2;max-width:var(--hero-max);padding:0 var(--hero-pad);width:100%
  }
  .hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
  .hero-title{
    font-size:var(--hero-title);font-weight:var(--w-medium);letter-spacing:-.02em;
    color:var(--text-1);line-height:var(--hero-line);margin:0;display:flex;flex-direction:column;text-align:center
  }
  .hero-title-main{white-space:nowrap}
  .hero-subtitle{
    color:var(--text-2);font-weight:var(--w-regular);text-align:center;
    line-height:1.5;font-size:var(--hero-subtitle);max-width:min(100%,800px);margin:1rem auto 0
  }

  .bottom-header{position:fixed;bottom:0;left:0;width:100%;padding:1rem 2rem;z-index:1000}
/* Pas de blur par défaut (mobile/PRM safe) */
.nav-container{
  max-width:1400px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;
  background:var(--nav-bg);border:1px solid var(--border-1);border-radius:var(--radius-full);
  padding:var(--nav-pad);
}
/* Rétablit le blur uniquement sur desktop et si PRM ≠ reduce */
@media (min-width:1024px) and (prefers-reduced-motion: no-preference){
  .nav-container{ backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px) }
}

  /* vidéo de fond (si utilisée dans le hero) */
  #background-designvideo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0}
}

/* ========== utilities ========== */
@layer utilities{
  .hidden{display:none!important}

  @media (max-width:768px){
    .hero-title-main{white-space:normal}
    .bottom-header{top:0;bottom:auto;padding:.5rem 1rem;height:var(--header-h)}
  }

  /* Optimisations loader responsive */
  @media (max-width:768px), (max-height:1024px){
    .bentrade-initial-loader__spinner{width:60px;height:60px;animation-duration:2s}
    .bentrade-initial-loader__progress{width:160px}
    .bentrade-initial-loader__percentage{font-size:16px}
  }

  @media (prefers-reduced-motion:reduce){
    *{animation-duration:0s!important;animation-iteration-count:1!important;transition:none!important;scroll-behavior:auto!important}
    .bentrade-initial-loader__spinner{animation-duration:3s}
  }
}