/* SoftFix ACCUEIL — intro A « Le point » isolée (écrase .btn / h1 / input console).
   Référence pixel : v2/design/intro-orchestra-A.html état settled. */
#saasGate{
  --acc-bg:#FFFFFF; --acc-ink:#0B0B0C; --acc-muted:#6B717C; --acc-line:#E3E6EB; --acc-field:#F4F5F7;
  --acc-tile:#0B0B0C; --acc-tile-edge:rgba(255,255,255,0); --acc-blue:#0080FF;
  --acc-ui:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Arial,sans-serif;
  --acc-brand:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --T:68px;
  position:fixed !important; inset:0 !important; z-index:2147482500 !important;
  display:block !important; margin:0 !important; padding:0 !important;
  background:var(--acc-bg) !important; color:var(--acc-ink) !important;
  font-family:var(--acc-ui) !important; overflow:hidden !important;
  color-scheme:light !important;
  /* annule tokens console qui fuitent */
  --font:var(--acc-ui); --font-display:var(--acc-ui); --ink:var(--acc-ink); --muted:var(--acc-muted);
  --bg:var(--acc-bg); --paper:var(--acc-bg); --line:var(--acc-line); --blue:var(--acc-blue);
}
html[data-theme="dark"] #saasGate,
:root[data-theme="dark"] #saasGate{
  --acc-bg:#000000; --acc-ink:#F2F3F5; --acc-muted:#8D93A0; --acc-line:#24272E; --acc-field:#111317;
  --acc-tile:#0B0B0C; --acc-tile-edge:rgba(255,255,255,.14); --acc-blue:#0A84FF;
  color-scheme:dark !important;
  background:#000000 !important;
}
@media (prefers-color-scheme: dark){
  html:not([data-theme="light"]) #saasGate{
    --acc-bg:#000000; --acc-ink:#F2F3F5; --acc-muted:#8D93A0; --acc-line:#24272E; --acc-field:#111317;
    --acc-tile:#0B0B0C; --acc-tile-edge:rgba(255,255,255,.14); --acc-blue:#0A84FF;
  }
}
@media (max-width:520px){#saasGate{--T:54px}}
#saasGate[hidden]{display:none!important}

#saasGate .acc-stage{position:relative !important;height:100% !important;width:100% !important}
#saasGate .acc-lockup{position:absolute !important;left:50% !important;top:50% !important;
  transform:translate(-50%,-50%) !important;display:flex !important;align-items:center !important;
  transition:top .9s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,.8,.2,1) !important}
#saasGate .acc-tile{flex:none !important;position:relative !important;width:var(--T) !important;height:var(--T) !important;
  border-radius:calc(var(--T)*.219) !important;background:var(--acc-tile) !important;
  box-shadow:inset 0 0 0 1px var(--acc-tile-edge) !important}
#saasGate .acc-S{position:absolute !important;inset:0 !important;display:grid !important;place-items:center !important;
  font-family:var(--acc-brand) !important;font-weight:700 !important;color:#fff !important;
  font-size:calc(var(--T)*.56) !important;letter-spacing:-.03em !important;line-height:1 !important;
  padding-top:calc(var(--T)*.04) !important}
#saasGate .acc-cdot{position:absolute !important;width:calc(var(--T)*.156) !important;height:calc(var(--T)*.156) !important;
  border-radius:50% !important;background:var(--acc-blue) !important;
  left:calc(var(--T)*.703) !important;top:calc(var(--T)*.141) !important}
#saasGate .acc-word{display:grid !important;overflow:hidden !important;max-width:340px !important;
  padding-left:calc(var(--T)*.26) !important;white-space:nowrap !important}
#saasGate .acc-name{font-family:var(--acc-brand) !important;font-weight:800 !important;
  font-size:calc(var(--T)*.74) !important;letter-spacing:-.042em !important;line-height:.95 !important;
  color:var(--acc-ink) !important}
#saasGate .acc-sub{justify-self:end !important;font-family:var(--acc-brand) !important;font-weight:700 !important;
  font-size:calc(var(--T)*.2) !important;letter-spacing:.4em !important;margin-right:-.4em !important;
  color:var(--acc-blue) !important;margin-top:calc(var(--T)*.05) !important}

#saasGate .acc-stage.play .acc-tile{animation:acc-a-morph 1s cubic-bezier(.65,0,.25,1) both}
#saasGate .acc-stage.play .acc-S{animation:acc-fade-in .4s ease .8s both}
#saasGate .acc-stage.play .acc-cdot{animation:acc-pop .5s cubic-bezier(.3,1.6,.5,1) 1.05s both}
#saasGate .acc-stage.play .acc-word{animation:acc-reveal .8s cubic-bezier(.65,0,.25,1) 1.3s both}
#saasGate .acc-stage.play .acc-sub{animation:acc-fade-up .5s ease 2s both}
@keyframes acc-a-morph{
  0%{width:calc(var(--T)*.2);height:calc(var(--T)*.2);border-radius:50%;background:var(--acc-blue);transform:translateY(-40px);opacity:0}
  22%{opacity:1;transform:translateY(0)}
  38%{width:calc(var(--T)*.2);height:calc(var(--T)*.2);border-radius:50%;background:var(--acc-blue);transform:scale(1)}
  48%{transform:scale(.8)}
  100%{width:var(--T);height:var(--T);border-radius:calc(var(--T)*.219);background:var(--acc-tile)}}
@keyframes acc-reveal{from{max-width:0;padding-left:0;opacity:.2}to{max-width:340px;padding-left:calc(var(--T)*.26);opacity:1}}
@keyframes acc-fade-in{from{opacity:0}to{opacity:1}}
@keyframes acc-fade-up{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes acc-pop{from{transform:scale(0)}to{transform:scale(1)}}

/* SoftFix ACCUEIL finition — logo + formulaire centrés verticalement, ~70 px entre logo et Bienvenue */
#saasGate .acc-stage.settled{
  display:flex !important;flex-direction:column !important;align-items:center !important;
  justify-content:center !important;gap:70px !important;padding:24px 16px !important;
  box-sizing:border-box !important;
}
#saasGate .acc-stage.settled .acc-lockup{
  position:relative !important;left:auto !important;top:auto !important;
  transform:scale(.72) !important;margin:0 !important;
}
#saasGate .acc-stage.settled .acc-skip{opacity:0 !important;pointer-events:none !important}

/* Colonne 360 px — display:contents pour aplatir panel/form comme la référence */
#saasGate .acc-login{
  position:absolute !important;left:50% !important;top:57% !important;
  transform:translate(-50%,-48%) !important;
  width:min(360px,calc(100% - 32px)) !important;
  max-width:360px !important;
  display:grid !important;grid-template-columns:minmax(0,1fr) !important;gap:10px !important;
  opacity:0;visibility:hidden;
  transition:opacity .7s ease .25s,transform .9s cubic-bezier(.2,.8,.2,1) .2s,visibility 0s .9s !important;
  box-sizing:border-box !important;margin:0 !important;padding:0 !important;
}
#saasGate .acc-stage.settled .acc-login{
  position:relative !important;left:auto !important;top:auto !important;
  opacity:1 !important;visibility:visible !important;transform:none !important;
  transition:opacity .7s ease .25s,visibility 0s !important;
}
#saasGate #accPanelLogin:not([hidden]),
#saasGate #saasForm:not([hidden]),
#saasGate #accStepPassword:not([hidden]){
  display:contents !important;
}
#saasGate #accPanelLogin[hidden],
#saasGate #saasForm[hidden],
#saasGate #accStepPassword[hidden],
#saasGate .acc-panel[hidden],
#saasGate .acc-step[hidden]{
  display:none !important;
}
#saasGate #accPanelAccess:not([hidden]){
  display:grid !important;grid-column:1 / -1 !important;gap:10px !important;
}

/* Titre / accroche — bat h1 console (clamp 36–48) */
#saasGate .acc-login h1,
#saasGate #saasTitle{
  all:unset !important;
  display:block !important;
  font-family:var(--acc-ui) !important;
  font-weight:600 !important;
  font-size:22px !important;
  line-height:1.25 !important;
  text-align:center !important;
  margin:0 0 2px !important;
  letter-spacing:-.01em !important;
  color:var(--acc-ink) !important;
  width:100% !important;
}
#saasGate .acc-login p.acc-lede,
#saasGate .acc-lede{
  all:unset !important;
  display:block !important;
  margin:0 0 8px !important;
  text-align:center !important;
  color:var(--acc-muted) !important;
  font:400 14px/1.4 var(--acc-ui) !important;
  width:100% !important;
}

/* Boutons pleine largeur 44 px — bat .btn console */
#saasGate .acc-btn,
#saasGate button.acc-btn,
#saasGate #saasSubmit.acc-btn{
  all:unset !important;
  box-sizing:border-box !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:10px !important;
  width:100% !important;
  max-width:100% !important;
  height:44px !important;
  min-height:44px !important;
  padding:0 14px !important;
  border-radius:12px !important;
  border:1px solid var(--acc-line) !important;
  background:var(--acc-bg) !important;
  color:var(--acc-ink) !important;
  font:500 14.5px/1 var(--acc-ui) !important;
  cursor:pointer !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
#saasGate .acc-btn svg{width:16px !important;height:16px !important;flex:none !important}
#saasGate .acc-btn.primary,
#saasGate #saasSubmit.acc-btn.primary{
  background:var(--acc-ink) !important;
  color:var(--acc-bg) !important;
  border-color:var(--acc-ink) !important;
}

#saasGate .acc-or{
  display:flex !important;align-items:center !important;gap:10px !important;
  color:var(--acc-muted) !important;font:400 12px var(--acc-ui) !important;
  width:100% !important;margin:0 !important;
}
#saasGate .acc-or::before,#saasGate .acc-or::after{
  content:"" !important;flex:1 !important;height:1px !important;background:var(--acc-line) !important;
}

#saasGate .acc-login input,
#saasGate #saasEmail,
#saasGate #saasPassword,
#saasGate #saasNewPassword,
#saasGate #accAccessName,
#saasGate #accAccessEmail,
#saasGate #accAccessCompany{
  all:unset !important;
  box-sizing:border-box !important;
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  height:44px !important;
  min-height:44px !important;
  border-radius:12px !important;
  border:1px solid var(--acc-line) !important;
  background:var(--acc-field) !important;
  color:var(--acc-ink) !important;
  padding:0 14px !important;
  font:400 15px/44px var(--acc-ui) !important;
  -webkit-text-fill-color:var(--acc-ink) !important;
}

#saasGate .acc-access{
  text-align:center !important;font:400 13px var(--acc-ui) !important;
  color:var(--acc-muted) !important;width:100% !important;margin:0 !important;
}
#saasGate .acc-access a,
#saasGate .acc-access button.link{
  all:unset !important;color:var(--acc-ink) !important;cursor:pointer !important;
  text-decoration:underline !important;font:inherit !important;
}
#saasGate .acc-forgot{text-align:center !important;font-size:12px !important;margin:0 !important;width:100% !important}
#saasGate .acc-forgot button{
  all:unset !important;color:var(--acc-muted) !important;font:500 12px var(--acc-ui) !important;
  cursor:pointer !important;text-decoration:underline !important;
}
#saasGate .acc-err{min-height:1.1em !important;margin:0 !important;color:#dc2626 !important;
  font:400 13px var(--acc-ui) !important;text-align:center !important;width:100% !important}
html[data-theme="dark"] #saasGate .acc-err{color:#ff8a8a !important}
#saasGate .acc-sr{position:absolute !important;left:-9999px !important}
#saasGate .acc-skip{
  position:fixed !important;right:max(16px,env(safe-area-inset-right,0px)) !important;
  bottom:max(14px,env(safe-area-inset-bottom,0px)) !important;border:0 !important;
  background:transparent !important;color:var(--acc-muted) !important;
  font:500 13px var(--acc-ui) !important;cursor:pointer !important;padding:6px 8px !important;
  border-radius:8px !important;opacity:0;transition:opacity .3s !important;z-index:2 !important;
}
#saasGate .acc-stage.play:not(.settled) .acc-skip{opacity:1 !important}
#saasGate .acc-login:focus-visible,#saasGate .acc-btn:focus-visible,#saasGate .acc-login input:focus-visible,#saasGate .acc-skip:focus-visible{
  outline:2px solid var(--acc-blue) !important;outline-offset:2px !important;
}

/* IdP off : masquer Google / Microsoft / « ou » (pas de boutons grisés) */
#saasGate[data-idp="0"] .acc-idp,
#saasGate .acc-idp[hidden]{display:none !important}

#saasGate .acc-panel[hidden],#saasGate .acc-step[hidden]{display:none!important}
#saasGate .acc-access-form h2{
  all:unset !important;display:block !important;font:600 18px var(--acc-ui) !important;
  text-align:center !important;color:var(--acc-ink) !important;margin:0 !important;
}
#saasGate .acc-note{font:400 12px var(--acc-ui) !important;color:var(--acc-muted) !important;
  text-align:center !important;margin:0 !important;width:100% !important}

@media (prefers-reduced-motion: reduce){
  #saasGate .acc-stage *{animation:none!important;transition:none!important}
}
