@import url("/fox/fonts.css");
@import url("/fox/theme.css");
@import url("/fox/form.css");
@import url("/fox/bands.css");
/* Connexion : page blanche, bandes de la vitrine en fond, carte centrée. Contrôles : norme theme.css (36 px, rayon 6 px). */
:root{color-scheme:light;font-family:var(--fox-font);color:var(--fox-navy);background:#fff;font-synthesis:none}
*{box-sizing:border-box}
body{margin:0;min-height:100svh;display:flex;flex-direction:column;background:#fff;overflow-x:hidden;-webkit-font-smoothing:antialiased;position:relative;isolation:isolate}
h1,p{margin:0}
/* Bandes diagonales : /fox/bands.css (communes à toutes les pages). */
/* Marque en haut à gauche, comme le header de la vitrine */
.login-brand{position:absolute;top:16px;left:48px;height:40px;display:flex;align-items:center;gap:9px;color:var(--fox-navy);text-decoration:none;line-height:1}
.login-brand img{width:34px;height:40px;object-fit:contain;display:block}
.login-brand span{font-size:17px;font-weight:800;letter-spacing:0;white-space:nowrap}.login-brand em{font-style:normal;color:var(--fox-orange)}
/* Carte */
main{flex:1;display:flex;align-items:center;justify-content:center;padding:112px 24px 48px}
.login-card{width:100%;max-width:420px;background:#fff;border:1px solid var(--fox-control-border);border-radius:var(--fox-card-radius);padding:36px;box-shadow:0 24px 60px -24px rgba(23,44,67,.25),0 2px 6px rgba(23,44,67,.05)}
/* Mascotte : une pose et un emplacement par page. Les ratios viennent des images (400 px de large) :
   connexion : bord de carte à 392/474 de la hauteur ; mot de passe oublié : bord de carte à 39/400 de la largeur. */
.login-card{position:relative;--mascot-w:150px}
.login-mascot{position:absolute;width:var(--mascot-w);height:auto;pointer-events:none;user-select:none;z-index:1}
/* Connexion : accoudé au bord haut. */
.login-mascot--lean{right:30px;top:calc(var(--mascot-w) * -392 / 400)}
main:has(.login-mascot--lean){padding-top:180px}
/* Mot de passe oublié : sort de derrière le côté droit, la clé à la main. */
.login-mascot--key{left:calc(100% - var(--mascot-w) * 39 / 400);top:28px}
/* Créer un compte : debout devant le coin bas gauche, la queue posée sur la carte. */
.login-mascot--hello{left:-112px;bottom:-22px;filter:drop-shadow(0 8px 6px rgba(23,44,67,.16))}
.login-card h1{font-size:26px;line-height:1.15;letter-spacing:-.035em;font-weight:700}
.intro{color:#657486;line-height:1.5;font-size:15px;margin:8px 0 26px}
form{display:flex;flex-direction:column;gap:16px}
.login-spaces{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-direction:column;gap:8px}.login-spaces li{display:flex;justify-content:space-between;gap:12px;padding:10px 12px;border:1px solid var(--fox-control-border);border-radius:4px;font-size:14px}.login-spaces small{color:#7a8693}
.login-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media(max-width:480px){.login-grid{grid-template-columns:1fr}}
/* Actions */
.login-submit{display:flex;align-items:center;justify-content:center;width:100%;height:var(--fox-control-height);min-height:var(--fox-control-height);margin-top:6px;padding:0;font:inherit;font-size:15px;font-weight:600;border-radius:var(--fox-control-radius);background:var(--fox-orange);border:1px solid var(--fox-orange);color:#fff;cursor:pointer;transition:background .15s}
.login-submit:hover{background:#e98239;border-color:#e98239}
.login-submit:focus-visible{outline:2px solid var(--fox-navy);outline-offset:3px}
.login-forgot{margin:-6px 0 0;text-align:right;font-size:14px}.login-forgot a{color:var(--fox-navy);font-weight:500;text-decoration:none}.login-forgot a:hover{color:#b94b12;text-decoration:underline;text-underline-offset:3px}
.login-alt{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;margin-top:4px;font-size:14px;color:#657486}.login-alt a{color:var(--fox-navy);font-weight:600;text-decoration:underline;text-underline-offset:3px}.login-alt a:hover{color:#b94b12}.login-alt+.login-alt{margin-top:-6px}
.login-demo-btn{display:inline-flex;align-items:center;margin:0;padding:0;height:auto;font:inherit;font-size:14px;font-weight:600;background:transparent;border:0;color:var(--fox-navy);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.login-demo-btn:hover{color:#b94b12}.login-demo-btn:focus-visible{outline:2px solid var(--fox-navy);outline-offset:2px;border-radius:2px}
.login-submit:disabled,.login-demo-btn:disabled{cursor:wait;opacity:.8}
.loading-message{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.login-dots{display:none;align-items:center;justify-content:center;gap:5px;height:100%}
.login-dots i{width:4px;height:4px;border-radius:50%;background:currentColor;animation:dot-pulse 1.1s ease-in-out infinite}
.login-dots i:nth-child(2){animation-delay:.15s}.login-dots i:nth-child(3){animation-delay:.3s}
button[aria-busy=true] .button-label{display:none}button[aria-busy=true] .login-dots{display:flex}
.login-demo-btn[aria-busy=true]{min-width:110px;justify-content:center}
@keyframes dot-pulse{0%,70%,100%{opacity:.4;transform:translateY(0)}35%{opacity:1;transform:translateY(-2px)}}
/* Pied de page discret */
.login-foot{display:flex;align-items:center;justify-content:flex-start;gap:22px;flex-wrap:wrap;padding:0 48px 28px;font-size:12px;color:#7a8693}.login-foot span,.login-foot a{white-space:nowrap}
.login-foot a{color:inherit;text-decoration:none}.login-foot a:hover{color:var(--fox-navy)}
@media(max-width:640px){.login-foot{padding:0 20px 24px;gap:10px 18px}.login-brand{left:20px;top:14px}.login-brand span{font-size:16px}main{padding:88px 20px 32px;align-items:flex-start}.login-card{padding:28px 22px}.login-card{--mascot-w:120px}.login-mascot--lean{right:18px}main:has(.login-mascot--lean){padding-top:160px}main:has(.login-mascot--key){padding-right:96px}.login-mascot--key{--mascot-w:96px;top:18px}main:has(.login-mascot--hello){padding-bottom:170px}.login-mascot--hello{--mascot-w:110px;left:6px;bottom:-146px}.login-band .band-navy,.login-band .band-streak,.login-band .band-glow{display:none}.band-main{left:70%;width:30%;--op:.6}.band-peach{left:90%}}
@media(prefers-reduced-motion:reduce){.login-dots i,.field-eye .eye-slash,.field-eye .eye-pupil,.field label{animation:none;transition:none}}