/* Apo'loop : connexion */

body{background:var(--canvas)}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:100%}
.brand{position:relative;overflow:hidden;background:var(--plum);color:var(--on-plum);padding:40px 48px;display:flex;flex-direction:column;justify-content:space-between}
.brand .wm{font-size:26px;font-weight:800;letter-spacing:-0.02em}
.brand .wm .apo{color:var(--framboise)}
.brand .huge{position:absolute;right:-30px;bottom:-140px;font-weight:800;font-size:620px;line-height:1;color:var(--framboise);user-select:none;pointer-events:none}
.brand .agency{position:relative;font-size:15px;color:var(--on-plum-2)}
.panel{position:relative;display:flex;align-items:center;justify-content:center;padding:40px 24px}
.box{width:min(420px,100%);display:flex;flex-direction:column;gap:16px}
.box h1{margin:0;font-size:34px;font-weight:800;letter-spacing:-0.03em;line-height:1.1}
.box p.lead{margin:0;color:var(--ink-2);font-size:15.5px;line-height:1.5}
.box .btn{height:46px;font-size:15px;width:100%}
.alt{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.alt .link{font-size:14px}
.err{margin:0;padding:10px 12px;border-radius:12px;background:var(--mod-bg);color:var(--mod-ink);font-size:14px;font-weight:600}
.ok{margin:0;padding:12px 14px;border-radius:12px;background:var(--client-bg);color:var(--client-ink);font-size:14.5px;line-height:1.5}
.pw-rule{font-size:13px;color:var(--ink-3)}
.pw-rule.good{color:var(--client-ink)}
.demo{position:fixed;right:16px;bottom:16px;z-index:5;display:flex;gap:6px;align-items:center;padding:6px 6px 6px 12px;border-radius:14px;background:var(--paper);border:1px solid var(--rule);font-size:12.5px;color:var(--ink-3)}
.brand .foot{position:relative;display:flex;align-items:baseline;gap:22px;flex-wrap:wrap}
.legal{display:flex;gap:18px;font-size:13px}
.legal a{color:var(--on-plum-2);text-decoration:none}.legal a:hover{color:var(--on-plum);text-decoration:underline;text-underline-offset:3px}
@media (max-width:860px){ .split{grid-template-columns:minmax(0,1fr)} .brand{min-height:160px;padding:24px} .brand .huge{font-size:300px;bottom:-80px} }