/* Le choix se déroule dans le même environnement et sur la même surface. */
.toi-entry { width: min(100%, 1000px); margin: 0 auto 32px; padding: 20px 16px; box-sizing: border-box; }
.toi-entry h1 { text-align: center; font-size: clamp(1.2rem,4.8vw,2rem); font-weight: 400; letter-spacing: .1em; line-height: 1.5; margin: 0 0 24px; }
.toi-hint,.toi-storage,.toi-invitation { text-align: center; }
.toi-form { max-width: 440px; margin: 24px auto; }
.toi-form label { display: block; margin-bottom: 8px; }
.toi-form input { width: 100%; min-height: 44px; box-sizing: border-box; padding: 10px; font: inherit; color: #f5f6ff; background: #071329; border: 1px solid #8ca7c7; border-radius: 4px; }
.toi-form button,.toi-skip { display: block; min-height: 44px; padding: 12px 20px; margin: 16px auto 0; font: inherit; letter-spacing: .08em; color: #f5f6ff; background: #071329; border: 1px solid #8ca7c7; border-radius: 4px; cursor: pointer; }
.toi-form :focus-visible,.toi-skip:focus-visible { outline: 2px solid #76caff; outline-offset: 3px; }
#toi-error:empty { display: none; }
.toi-label { position: absolute; top: 34px; left: 50%; transform: translateX(-50%); padding: 1px 5px; background: #071329; color: #f5f6ff; font: 500 12px Jost,sans-serif; letter-spacing: .06em; pointer-events: none; }
.toi-invitation { margin: 0 0 20px; }
.toi-invitation a { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 18px; font-size: clamp(1.25rem,4vw,1.6rem); font-weight: 500; color: #f5f6ff; background: #071329; border: 1px solid #8ca7c7; border-radius: 4px; text-underline-offset: .2em; }
.toi-invitation a:focus-visible { outline: 2px solid #76caff; outline-offset: 3px; }
[data-next-phase][hidden],.toi-entry[hidden],.toi-form[hidden],.toi-skip[hidden],[data-reader][hidden],.toi-invitation[hidden] { display: none; }