:root{--account-bg:#06141d;--account-panel:#091b25;--account-input:#182a33;--account-line:rgba(202,225,232,.24);--account-text:#f7fbfc;--account-muted:#a8bdc6;--account-green:#62d49b;--account-green-dark:#40b77d;--account-blue:#29b9df;--account-danger:#ff8c80;--account-ease:cubic-bezier(.23,1,.32,1);--account-font:InterVariable,Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--account-heading-size:clamp(48px,5.1vw,78px);--account-heading-size-mobile:49px;--account-eyebrow-size:12px}

*{box-sizing:border-box}
body{margin:0;font-family:var(--account-font)}
.account-page{position:relative;display:grid;grid-template-columns:minmax(520px,43%) minmax(0,57%);min-height:100svh;color:var(--account-text);background:var(--account-bg)}
.account-header{position:fixed;z-index:20;inset:0 0 auto;display:flex;align-items:center;min-height:78px;padding:11px clamp(30px,6vw,96px);border-bottom:1px solid rgba(202,225,232,.13);background:rgba(6,20,29,.88);box-shadow:0 8px 28px rgba(0,0,0,.12);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.account-brand{display:inline-flex;align-items:center;color:#fff;font-size:16px;font-weight:950;text-decoration:none;gap:10px}
.account-brand img{display:block;width:48px;height:48px;object-fit:contain}
.account-access{position:relative;z-index:2;display:flex;align-items:flex-start;justify-content:center;padding:clamp(105px,10vw,138px) clamp(30px,6vw,96px) clamp(56px,6vw,92px);background:linear-gradient(90deg,var(--account-bg) 0%,var(--account-bg) 82%,rgba(6,20,29,.94) 100%)}
.account-card{width:min(100%,600px);margin:0}
.account-card-heading{margin-bottom:30px}
.account-eyebrow{margin:0 0 14px;color:var(--account-green);font-family:var(--account-font);font-size:var(--account-eyebrow-size);font-weight:900;line-height:1.5;letter-spacing:.1em;text-transform:uppercase}
.account-card-heading h1{margin:0;color:#fff;font-family:var(--account-font);font-size:var(--account-heading-size);font-weight:800;line-height:.96;letter-spacing:-.048em}
.account-title-brand-line{white-space:nowrap}
.account-title-blue{color:#51c8ef}
.account-title-green{color:#62b96b}
.account-title-gradient{color:#51c8ef;background:linear-gradient(90deg,#51c8ef 0%,#51c8ef 42%,#62b96b 100%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.account-card-heading>p:last-child{max-width:560px;margin:22px 0 0;color:#c1d2d9;font-size:17px;line-height:1.6}
.account-switch{display:grid;grid-template-columns:1fr 1fr;margin:0 0 32px;padding:4px;border:1px solid var(--account-line);border-radius:9px;background:rgba(255,255,255,.035)}
.account-switch a{display:flex;align-items:center;justify-content:center;min-height:44px;border-radius:6px;color:#bad0d8;font-size:14px;font-weight:900;text-decoration:none;transition:color 160ms ease,background-color 160ms ease,transform 140ms var(--account-ease)}
.account-switch a[aria-current=page]{color:#09202a;background:#fff;box-shadow:0 5px 18px rgba(0,0,0,.24)}
.account-form{display:grid;gap:17px}
.account-form[hidden]{display:none}
.account-form>.cf-turnstile{display:flex;width:100%;max-width:100%;justify-content:center}
.account-field{display:grid;min-width:0;gap:7px}
.account-field-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.account-field label,.account-label-row{color:#e6f0f3;font-size:13px;font-weight:850}
.account-label-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.account-label-row a{color:#4fc7e7;font-size:12px;text-underline-offset:3px}
.account-field input{width:100%;min-width:0;min-height:52px;padding:12px 14px;border:1px solid var(--account-line);border-radius:9px;outline:0;color:#fff;background:var(--account-input);font:inherit;transition:border-color 160ms ease,box-shadow 160ms ease,background-color 160ms ease}
.account-field input::placeholder{color:#768b94}
.account-field input:focus{border-color:var(--account-green);box-shadow:0 0 0 3px rgba(98,212,155,.16);background:#1b303a}
.account-field input[aria-invalid=true]{border-color:var(--account-danger);box-shadow:0 0 0 3px rgba(255,140,128,.12)}
.account-field>small:not(.account-field-error){color:#8fa7b0;font-size:11px}
.account-field-error{min-height:15px;color:var(--account-danger);font-size:11px;font-weight:750}
.account-password{position:relative;display:block}
.account-password input{padding-right:52px}
.account-password button{position:absolute;top:6px;right:6px;display:grid;width:40px;height:40px;padding:0;border:1px solid rgba(255,255,255,.1);border-radius:7px;color:#c0d2d8;background:#10232d;cursor:pointer;place-items:center;transition:color 150ms ease,background-color 150ms ease,transform 140ms var(--account-ease)}
.account-password button svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.account-password .eye-closed,.account-password button[aria-pressed=true] .eye-open{display:none}
.account-password button[aria-pressed=true] .eye-closed{display:block}
.account-guidance{margin:0;padding:13px 14px;border:1px solid rgba(98,212,155,.32);border-radius:9px;color:#cbe7da;background:rgba(98,212,155,.08);font-size:13px}
.account-feedback{padding:12px 13px;border:1px solid;border-radius:9px;font-size:13px;font-weight:750;line-height:1.45}
.account-feedback[data-type=error]{border-color:rgba(255,140,128,.45);color:#ffc0b9;background:rgba(166,55,43,.16)}
.account-feedback[data-type=success]{border-color:rgba(98,212,155,.4);color:#bdebd3;background:rgba(39,122,88,.18)}
.account-submit{display:flex;align-items:center;justify-content:center;width:100%;min-height:53px;padding:12px 18px;border:0;border-radius:9px;color:#06212b;background:linear-gradient(100deg,var(--account-green),var(--account-blue));box-shadow:0 12px 30px rgba(41,185,223,.16);cursor:pointer;font:inherit;font-weight:950;transition:filter 160ms ease,box-shadow 160ms ease,transform 140ms var(--account-ease)}
.account-submit:disabled{cursor:wait;opacity:.65}
.account-password button:active,.account-submit:active,.account-switch a:active{transform:scale(.97)}
.account-alternative{margin:1px 0 0;color:var(--account-muted);font-size:13px}
.account-alternative a,.account-consent a{color:#49c6e7;font-weight:850;text-underline-offset:3px}
.account-consent{display:flex;align-items:flex-start;gap:9px;color:#a9bec6;font-size:12px;line-height:1.55}
.account-consent input{width:17px;height:17px;margin:2px 0 0;accent-color:var(--account-green)}
.account-reassurance{display:flex;align-items:flex-start;gap:8px;margin:0;color:#91a9b2;font-size:11px;line-height:1.5}
.account-reassurance svg{width:17px;height:17px;flex:0 0 auto;fill:none;stroke:var(--account-green);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.account-visual{position:sticky;top:0;align-self:start;height:100svh;min-height:0;overflow:hidden;background:#0a1820 url('/assets/gestion-sasu-hero.webp') 59% center/cover no-repeat}
.account-visual:before{position:absolute;inset:0;background:linear-gradient(90deg,#06141d 0%,rgba(6,20,29,.52) 15%,transparent 42%),linear-gradient(0deg,rgba(2,11,17,.72),transparent 38%);content:""}

@media(hover:hover) and (pointer:fine){.account-switch a:not([aria-current=page]):hover{color:#fff;background:rgba(255,255,255,.07)}
.account-password button:hover{color:#fff;background:#1b3440}
.account-submit:hover{filter:saturate(1.08) brightness(1.05);box-shadow:0 15px 34px rgba(41,185,223,.22)}
.account-label-row a:hover,.account-alternative a:hover,.account-consent a:hover{text-decoration-thickness:2px}
}

@media(max-width:1100px){.account-page{grid-template-columns:minmax(460px,52%) minmax(0,48%)}
.account-access{padding-inline:42px}
.account-visual{background-position:65% center}
}

@media(max-width:900px){.account-page{grid-template-columns:1fr}
.account-header{min-height:72px;padding:10px 24px}
.account-access{padding:104px 24px 64px}
.account-card{width:min(100%,680px)}
.account-visual{position:relative;top:auto;align-self:auto;height:360px;min-height:360px;background-position:65% 45%;order:2}
.account-visual:before{background:linear-gradient(180deg,#06141d 0%,transparent 28%),linear-gradient(0deg,rgba(2,11,17,.75),transparent 50%)}
}

@media(max-width:620px){.account-header{min-height:68px;padding:10px 18px;background:rgba(6,20,29,.92)}
.account-brand img{width:44px;height:44px}
.account-access{padding:100px 18px 52px}
.account-card-heading{margin-bottom:24px}
.account-card-heading h1{font-size:var(--account-heading-size-mobile)}
.account-card-heading>p:last-child{margin-top:17px;font-size:15px}
.account-switch{margin-bottom:25px}
.account-field-grid{grid-template-columns:1fr}
.account-visual{height:280px;min-height:280px}
}

@media(prefers-reduced-motion:reduce){.account-field input,.account-password button,.account-submit,.account-switch a{transition-duration:.01ms}
}
