/* Bannière « Activez votre compte » (IDEE-038) : charte DESIGN.md, fond forêt, accent citron adouci. */
.acct-banner{--ab-forest:#172b24;--ab-forest-light:#253c31;--ab-cream:#f4f1e8;--ab-lime:#e1f58a;position:relative;z-index:25;background:var(--ab-forest);color:var(--ab-cream);font-family:'Hanken Grotesk',Arial,sans-serif;border-bottom:1px solid rgba(244,241,232,.18)}
.acct-banner[hidden]{display:none!important}
.acct-banner .acct-inner{display:flex;flex-wrap:wrap;gap:12px 22px;align-items:center;justify-content:space-between;width:min(calc(100% - 2*clamp(16px,5vw,56px)),1440px);margin-inline:auto;padding:13px 0}
.acct-banner .acct-copy{display:flex;gap:12px;align-items:center;min-width:0;flex:1 1 320px;font-size:14px;line-height:1.45}
.acct-banner .acct-dot{flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:var(--ab-lime);box-shadow:0 0 0 4px rgba(225,245,138,.22)}
.acct-banner strong{font-weight:600;letter-spacing:.14em;text-transform:uppercase;font-size:11px;margin-right:8px;white-space:nowrap}
.acct-banner .acct-copy em{font-family:'EB Garamond',Georgia,serif;font-style:italic;font-size:17px;color:var(--ab-lime)}
.acct-banner form{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0}
.acct-banner input{height:42px;padding:0 13px;border:1px solid rgba(244,241,232,.32);border-radius:2px;background:var(--ab-forest-light);color:var(--ab-cream);font:500 15px 'Hanken Grotesk',Arial,sans-serif}
.acct-banner input::placeholder{color:rgba(244,241,232,.5)}
.acct-banner input:focus-visible{outline:2px solid var(--ab-lime);outline-offset:2px}
.acct-banner input.acct-code{width:150px;letter-spacing:.32em;text-align:center;font-family:'Anton',Impact,sans-serif;font-size:19px;font-weight:400}
.acct-banner input.acct-mail{width:min(260px,100%)}
.acct-banner button{display:inline-flex;gap:18px;align-items:center;justify-content:space-between;height:42px;padding:0 15px;border:0;border-radius:2px;background:var(--ab-lime);color:var(--ab-forest);font:600 13px 'Hanken Grotesk',Arial,sans-serif;cursor:pointer;transition:transform .2s}
.acct-banner button:hover{transform:translateY(-2px)}
.acct-banner button:disabled{opacity:.55;cursor:default;transform:none}
.acct-banner .acct-link{height:auto;padding:4px 0;background:none;color:var(--ab-cream);font-weight:500;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(244,241,232,.4)}
.acct-banner .acct-msg{flex-basis:100%;margin:0;font-size:13px;color:rgba(244,241,232,.78)}
.acct-banner .acct-msg:empty{display:none}
.acct-banner .acct-msg.error{color:#ffb4a8}
.acct-banner.done{background:var(--ab-forest-light)}
/* Écran mobile des pages à en-tête fixe : la bannière se fixe en haut, les scripts mobiles décalent l'écran d'autant. */
@media (max-width:900px){body:has(.app-header) .acct-banner{position:fixed;top:0;inset-inline:0;z-index:12}}
.acct-banner .acct-open{display:none}
.acct-banner.compact .acct-open{display:inline-flex}
.acct-banner.compact form,.acct-banner.compact .acct-copy .acct-text,.acct-banner.compact .acct-msg{display:none}
@media (max-width:640px),(max-height:500px){.acct-banner.compact .acct-inner{flex-wrap:nowrap;padding:8px 0}.acct-banner.compact .acct-copy{flex:1 1 auto}.acct-banner.compact strong{margin:0}.acct-banner .acct-open{height:36px}.acct-banner .acct-inner{padding:12px 0}.acct-banner form{width:100%}.acct-banner input.acct-mail{flex:1 1 180px}.acct-banner input.acct-code{flex:1 1 auto}.acct-banner strong{display:block;margin-bottom:2px}}
@media (prefers-reduced-motion:reduce){.acct-banner button{transition:none}.acct-banner button:hover{transform:none}}