/* Écrans d'accès (connexion, mot de passe) et pages d'erreur. Le timbre est un décor : ses couleurs sont fixes
   (elles ne changent pas avec le thème), comme dans le design. */
.login,.authpage{min-height:100vh;display:flex;flex-direction:column;max-width:26rem;margin:0 auto;background:var(--paper)}
@media (min-width:600px){.login,.authpage{box-shadow:0 0 0 1px var(--line)}}

/* Le timbre du pôle Nord et son cachet */
.login__art{position:relative;height:372px;flex:none}
.postage{position:absolute;left:70px;top:56px;width:220px;height:270px;background:#9B1C26;border:7px dotted var(--paper);padding:8px;transform:rotate(3deg);box-shadow:0 16px 28px -18px rgba(0,0,0,.5)}
.postage__frame{box-sizing:border-box;width:100%;height:100%;border:1px solid #E9D49A;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:14px;text-align:center}
.postage__top{width:100%;display:flex;justify-content:space-between;font:600 11px/1 var(--font-ui);letter-spacing:.18em;color:#F3E2B0}
.postage__top span:last-child{letter-spacing:.1em}
.postage__title{margin:0;font:italic 500 34px/1.02 var(--font-display);color:#FBF7EE}
.postage__bottom{font:600 11px/1 var(--font-ui);letter-spacing:.14em;color:#F3E2B0}
.postmark{position:absolute;left:18px;top:250px;width:104px;height:104px;box-sizing:border-box;border-radius:50%;background:rgba(244,239,228,.55);border:2px solid #143A2B;display:flex;align-items:center;justify-content:center;transform:rotate(-14deg)}
.postmark__in{width:86px;height:86px;box-sizing:border-box;border-radius:50%;border:1px solid #143A2B;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:#143A2B;font:600 10px/1 var(--font-ui);letter-spacing:.14em}
.postmark__in em{font:italic 500 18px var(--font-display);letter-spacing:0}

/* Formulaires d'accès */
.login__form,.authpage__form{margin:0 32px;display:flex;flex-direction:column;gap:14px;position:relative}
.login__form label,.authpage__form label{display:flex;flex-direction:column;gap:6px;font:500 14px var(--font-ui);color:var(--ink-2)}
.login__form input,.authpage__form input{height:50px;box-sizing:border-box;width:100%;border:1px solid var(--line-strong);border-radius:var(--r-xs);background:var(--card);padding:0 14px;font:400 17px var(--font-ui);color:var(--ink)}
.field--error input{border:2px solid var(--accent)}
.btn-stamp{height:54px;width:100%;border:0;border-radius:var(--r-xs);background:var(--primary);color:var(--on-primary);font:600 15px var(--font-ui);letter-spacing:.14em;text-transform:uppercase;box-shadow:inset 0 0 0 3px var(--primary),inset 0 0 0 4px rgba(233,212,154,.7);margin-top:6px;cursor:pointer}
.btn-stamp:disabled{cursor:not-allowed;background:var(--paper-sunk);color:var(--ink-3);box-shadow:none;border:1px dashed var(--gold)}
.login__link{align-self:center;display:inline-flex;align-items:center;min-height:var(--tap);padding:10px;font:400 15px var(--font-ui);color:var(--primary-text);text-underline-offset:3px}
.login__foot{margin-top:auto;padding:24px;text-align:center;font:400 13px var(--font-ui);letter-spacing:.06em;color:var(--ink-3)}

/* Messages d'erreur et d'information des écrans d'accès */
.notice-box{display:flex;gap:var(--sp-3);margin:0 32px var(--sp-4);padding:var(--sp-3);border:1px solid var(--accent);background:var(--accent-soft);color:var(--accent-text);font:400 14px/1.4 var(--font-ui)}
.notice-box .icon{margin-top:2px}
.notice-box--gold{border-color:var(--gold);background:var(--gold-soft);color:var(--gold-text)}
.blocked{margin:0 32px var(--sp-4);padding:var(--sp-4);border:1px solid var(--gold);background:var(--card);text-align:center}
.blocked__title{margin:0 0 var(--sp-2);font:italic 500 22px var(--font-display);color:var(--ink)}
.blocked p{margin:0 0 var(--sp-3);font:400 14px/1.45 var(--font-ui);color:var(--ink-2)}
.expired{margin:var(--sp-5) 32px var(--sp-4);padding:var(--sp-4);background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow-2)}
.expired__title{margin:0 0 var(--sp-2);font:italic 500 24px/1.15 var(--font-display)}
.expired p{margin:0;font:400 14px/1.45 var(--font-ui);color:var(--ink-2)}

/* « Mot de passe oublié » et « Choisis ton mot de passe » */
.backlink{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin:20px 12px 0;padding:0 8px;font:400 15px var(--font-ui);text-decoration:none;color:var(--primary-text);align-self:flex-start}
.authpage__head{padding:24px 32px 0;display:flex;flex-direction:column;gap:12px}
.kicker{font:600 12px/1 var(--font-ui);letter-spacing:.2em;text-transform:uppercase;color:var(--gold-text)}
.authpage__title{margin:0;font:italic 500 34px/1.1 var(--font-display)}
.authpage__lead{margin:0;font:400 16px/1.5 var(--font-ui);color:var(--ink-2)}
.authpage__form{margin-top:var(--sp-5)}
.sent{margin:var(--sp-5) 32px 0;padding:var(--sp-4);display:flex;gap:var(--sp-3);background:var(--card);border:1px solid var(--gold);border-radius:var(--r-sm)}
.sent__tick{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:50%;background:var(--primary);color:var(--on-primary)}
.sent h2{margin:0 0 var(--sp-1);font:italic 500 22px var(--font-display)}
.sent p{margin:0;font:400 14px/1.45 var(--font-ui);color:var(--ink-2)}
.pwfield{position:relative;display:flex;flex-direction:column;gap:6px}
.pwfield__toggle{position:absolute;right:6px;bottom:3px;height:44px;padding:0 var(--sp-3);border:0;background:transparent;color:var(--primary-text);font:500 14px var(--font-ui);cursor:pointer}
.pwfield input{padding-right:84px}
.criteria{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-2);font:400 14px var(--font-ui);color:var(--ink-2)}
.criteria li{display:flex;align-items:center;gap:var(--sp-2)}
.criteria li::before{content:"";flex:none;width:18px;height:18px;border-radius:50%;border:1.5px solid var(--line-strong);box-sizing:border-box}
.criteria li.is-ok{color:var(--success-text)}
.criteria li.is-ok::before{background:var(--success-text) center/10px no-repeat;border-color:var(--success-text);box-shadow:inset 0 0 0 3px var(--card)}

/* Page perdue (404) et autres pages d'erreur : vitrine verte au filet d'or */
.lost{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-4);padding:var(--sp-7) var(--sp-5);box-sizing:border-box;background:var(--chrome);color:var(--on-chrome);text-align:center;position:relative;overflow:hidden}
.lost::before{content:"";position:absolute;inset:12px;border:1px solid var(--gold);pointer-events:none}
.lost__flakes{position:absolute;inset:0;pointer-events:none;color:var(--gold);opacity:.6}
.lost__flakes i{position:absolute;font-style:normal;font-size:14px}
.lost__flakes i:nth-child(1){left:12%;top:9%}.lost__flakes i:nth-child(2){left:62%;top:6%;font-size:11px}
.lost__flakes i:nth-child(3){left:34%;top:18%}.lost__flakes i:nth-child(4){left:84%;top:24%}.lost__flakes i:nth-child(5){left:9%;top:30%;font-size:11px}
.lost__stamp{display:inline-block;padding:6px var(--sp-3);border:2px solid var(--chrome-accent);color:var(--chrome-accent);font:600 13px/1.2 var(--font-ui);letter-spacing:.16em;text-transform:uppercase;transform:rotate(-4deg);box-shadow:inset 0 0 0 3px var(--chrome),inset 0 0 0 4px var(--chrome-accent)}
.lost__code{margin:0;font:italic 500 96px/1 var(--font-display);color:var(--chrome-accent)}
.lost__title{margin:0;font:italic 500 26px/1.15 var(--font-display)}
.lost__text{margin:0;max-width:22rem;font:400 15px/1.5 var(--font-ui);color:var(--on-chrome-2)}
.lost .btn-stamp{width:auto;padding:0 var(--sp-6);display:inline-flex;align-items:center;text-decoration:none;background:var(--accent);color:var(--on-accent);box-shadow:inset 0 0 0 3px var(--accent),inset 0 0 0 4px var(--gold-light)}
.authpage__head--first{padding-top:56px}
.notice-box--spaced{margin-top:20px}
.btn-stamp--link{display:flex;align-items:center;justify-content:center;text-decoration:none}
.authpage__title{text-wrap:balance}
.authpage__hint{margin:calc(-1 * var(--sp-2)) 0 0;font:400 14px/1.4 var(--font-ui);color:var(--ink-3)}