/* Pages de connexion / activation — écran scindé marque + formulaire. */
html,body{height:100%}
.shell{min-height:100vh;display:grid;grid-template-columns:1.05fr .95fr}
.brandside{position:relative;overflow:hidden;color:#fff;padding:52px 54px;display:flex;flex-direction:column;
  justify-content:space-between;background:linear-gradient(150deg,var(--sage) 0%,var(--sage-d) 55%,var(--sage-dd) 100%)}
.brandside::before{content:"";position:absolute;inset:0;opacity:.5;
  background:radial-gradient(900px 500px at 78% -8%,rgba(255,255,255,.18),transparent 60%),
             radial-gradient(700px 500px at -10% 110%,rgba(255,255,255,.10),transparent 55%)}
.brandside::after{content:"";position:absolute;inset:0;opacity:.06;
  background-image:linear-gradient(rgba(255,255,255,.9) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.9) 1px,transparent 1px);
  background-size:34px 34px;-webkit-mask-image:linear-gradient(160deg,#000,transparent 75%);mask-image:linear-gradient(160deg,#000,transparent 75%)}
.brandside>*{position:relative;z-index:1}
.bs-top{display:flex;align-items:center;gap:13px}
.bs-top .em{width:46px;height:46px;border-radius:13px;background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.28);display:grid;place-items:center}
.bs-top .k{font-family:'Sora';font-weight:700;font-size:15px;line-height:1.1}
.bs-top .c{font-size:11.5px;opacity:.72;margin-top:2px;letter-spacing:.4px;text-transform:uppercase}
.bs-mid{max-width:440px}
.bs-mid h2{font-family:'Sora';font-weight:800;font-size:33px;line-height:1.18;letter-spacing:-.6px}
.bs-mid p{margin-top:16px;font-size:14.5px;line-height:1.65;color:rgba(255,255,255,.84);max-width:410px}
.feats{margin-top:34px;display:flex;flex-direction:column;gap:16px}
.feat{display:flex;align-items:flex-start;gap:13px}
.feat .fi{flex:none;width:33px;height:33px;border-radius:9px;background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.2);display:grid;place-items:center;margin-top:1px}
.feat .ft b{font-family:'Sora';font-weight:600;font-size:13.5px;display:block}
.feat .ft span{font-size:12.5px;color:rgba(255,255,255,.72);line-height:1.5;display:block;margin-top:2px}
.bs-foot{font-size:12px;color:rgba(255,255,255,.62)}

.panel{display:flex;align-items:center;justify-content:center;padding:40px 32px;background:var(--card)}
.form-wrap{width:100%;max-width:400px}
.mark-sm{display:none;align-items:center;gap:10px;margin-bottom:28px}
.mark-sm .e{width:38px;height:38px;border-radius:11px;background:var(--sage);display:grid;place-items:center}
.mark-sm b{font-family:'Sora';font-weight:700;font-size:14px;color:var(--sage-d)}
.panel h1{font-family:'Sora';font-weight:700;font-size:26px;letter-spacing:-.4px}
.panel .sub{font-size:14px;color:var(--soft);margin-top:8px;line-height:1.55}
.panel form{margin-top:26px}
.field{margin-bottom:17px}
.btn.wide{width:100%;padding:13px;font-size:14.5px;border-radius:12px;font-family:'Sora';font-weight:700}
.btn .spin[hidden]{display:none}
.hint{font-size:12px;color:var(--mute);margin-top:7px}
.jauge{height:5px;background:#eef3f7;border-radius:4px;margin-top:9px;overflow:hidden}
.jauge i{display:block;height:100%;width:0;border-radius:4px;background:var(--coral);transition:width .25s,background .25s}
.foot-note{margin-top:28px;font-size:12px;color:var(--mute);line-height:1.6}
@media(max-width:900px){
  .shell{grid-template-columns:1fr}
  .brandside{display:none}
  .mark-sm{display:flex}
  .panel{padding:38px 22px;min-height:100vh;align-items:flex-start;padding-top:56px}
}