/* =============================================
 * IT ToolBox — page de connexion et page 404, thème « Terminal »
 * Publique (servie sans session) : aucune donnée, aucun markup applicatif.
 * Mêmes palettes que le portail ; le thème choisi par l'utilisateur
 * (localStorage) est appliqué par signin.js.
 * ============================================= */
:root, [data-theme="sulo"] {
    --bg: #08110F; --chrome: #0C1A17; --desk: #050A09; --halo: rgba(0,108,103,.45);
    --border: rgba(138,201,172,.22); --fg: #D5E6E1; --dim: #8AA39D;
    --accent: #8AC9AC; --accent2: #4FD1C1; --warn: #F0B35A; --err: #FF7A6B;
    --glow: rgba(138,201,172,.55); --on-accent: #08110F; --hover: rgba(138,201,172,.10);
}
[data-theme="ambre"] {
    --bg: #120C04; --chrome: #1B1307; --desk: #0A0602; --halo: rgba(120,70,0,.45);
    --border: rgba(255,176,0,.22); --fg: #FFD9A0; --dim: #B8925A;
    --accent: #FFB000; --accent2: #FFCC66; --warn: #FF8A3D; --err: #FF6B5A;
    --glow: rgba(255,176,0,.5); --on-accent: #120C04; --hover: rgba(255,176,0,.10);
}
[data-theme="powershell"] {
    --bg: #012456; --chrome: #011B42; --desk: #00122B; --halo: rgba(1,60,140,.6);
    --border: rgba(97,214,214,.25); --fg: #EEEDF0; --dim: #A9BCDB;
    --accent: #F9F1A5; --accent2: #61D6D6; --warn: #F9F1A5; --err: #FF7A7A;
    --glow: rgba(249,241,165,.45); --on-accent: #012456; --hover: rgba(97,214,214,.12);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    min-height: 100vh; display: grid; place-items: center; padding: 16px;
    background: radial-gradient(900px 520px at 50% 0%, var(--halo), transparent 70%), var(--desk);
    color: var(--fg); font-family: 'Cascadia Code', 'Cascadia Mono', Consolas, 'SF Mono', Menlo, monospace;
    font-size: 14px; line-height: 1.6; -webkit-font-smoothing: antialiased;
}
[hidden] { display: none !important; }

.box {
    width: 100%; max-width: 560px; overflow: hidden; border-radius: 12px; background: var(--bg);
    border: 1px solid var(--border); box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 40px 110px -40px var(--glow);
    animation: open .6s cubic-bezier(.2,.9,.25,1) both;
}
.bar {
    display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 16px;
    background: var(--chrome); border-bottom: 1px solid var(--border); color: var(--dim); font-size: 13px;
}
.bar b { font-weight: inherit; color: var(--accent); }
/* Choix de la langue (FR · EN), à droite de la barre de titre. */
.lang { display: flex; gap: 2px; margin-left: auto; }
.lang a {
    display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 40px; padding: 0 8px;
    color: var(--dim); text-decoration: none; border-bottom: 2px solid transparent;
}
.lang a:hover { color: var(--fg); background: var(--hover); }
.lang a:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
html[lang="fr"] .lang a[hreflang="fr"], html[lang="en"] .lang a[hreflang="en"] { color: var(--accent); border-bottom-color: var(--accent); }
.term { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 22px 22px 24px; }
.term::before {
    content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .08; mix-blend-mode: overlay;
    background: repeating-linear-gradient(180deg, rgba(255,255,255,.9) 0 1px, transparent 1px 3px);
}
.logo { display: block; align-self: flex-start; height: 30px; width: auto; padding: 5px 8px; margin-bottom: 8px; border-radius: 6px; background: #FFFFFF; }
h1 {
    margin: 0; font-size: 26px; font-weight: 700; color: var(--fg); letter-spacing: -0.02em;
}
h1::before { content: ">_ "; font-size: .6em; font-weight: 600; color: var(--dim); }
h1 .it { color: var(--accent); text-shadow: 0 0 16px var(--glow); }
.sub { margin: 0 0 10px; color: var(--dim); }
.line { animation: line .45s cubic-bezier(.2,.8,.2,1) both; }
.line:nth-of-type(2) { animation-delay: .15s; }
.line:nth-of-type(3) { animation-delay: .3s; }
.ps1 { color: var(--dim); }
.ps1 b { font-weight: inherit; color: var(--accent); }
.ps1 i { font-style: normal; color: var(--accent2); }
.dim { color: var(--dim); }
.err { color: var(--err); }

.progress { display: flex; align-items: center; gap: 10px; margin: 6px 0 0; color: var(--fg); }
.spinner {
    display: inline-block; width: 1ch; color: var(--accent);
}
.spinner::before { content: "⠋"; animation: spin 1s steps(1) infinite; }
.cursor {
    display: inline-block; width: .6em; height: 1.1em; vertical-align: -0.2em; background: var(--accent);
    box-shadow: 0 0 10px var(--glow); animation: blink 1.05s step-end infinite;
}

#signin-fallback { display: flex; flex-direction: column; gap: 14px; margin-top: 6px; }
.msg { margin: 0; color: var(--warn); }
.msg::before { content: "! "; }
body[data-page="pending"] .msg, body[data-page="disabled"] .msg {
    padding: 12px 14px; border: 1px solid var(--warn); border-radius: 8px; color: var(--fg);
    background: color-mix(in srgb, var(--warn) 10%, transparent);
}
body[data-page="pending"] .msg::before, body[data-page="disabled"] .msg::before { content: ""; }
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; align-self: flex-start;
    min-height: 48px; padding: 0 20px; border: 1px solid var(--accent); border-radius: 8px;
    background: var(--accent); color: var(--on-accent); font: inherit; font-weight: 700; text-decoration: none;
    box-shadow: 0 0 24px -6px var(--glow); transition: background .15s, color .15s;
}
.btn::before { content: ">"; }
.btn:hover { background: transparent; color: var(--accent); }
.btn:focus-visible { outline: 2px solid var(--accent2); outline-offset: 3px; }

.dev { margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--border); display: grid; gap: 8px; }
.dev label { font-size: 12px; color: var(--dim); }
.dev label::before { content: "# "; }
.dev input {
    min-height: 44px; padding: 0 12px; border: 1px solid var(--border); border-radius: 6px;
    background: var(--chrome); color: var(--fg); font: inherit;
}
.dev .btn { align-self: stretch; }

@keyframes open { from { opacity: 0; transform: translateY(18px) scale(.97); filter: blur(8px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes line { from { opacity: 0; transform: translateY(6px); filter: blur(3px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes spin {
    0% { content: "⠋"; } 10% { content: "⠙"; } 20% { content: "⠹"; } 30% { content: "⠸"; } 40% { content: "⠼"; }
    50% { content: "⠴"; } 60% { content: "⠦"; } 70% { content: "⠧"; } 80% { content: "⠇"; } 90% { content: "⠏"; }
}
@media (max-width: 480px) {
    body { padding: 0; place-items: stretch; }
    .box { max-width: none; border-radius: 0; border: 0; min-height: 100vh; }
    .term { padding: 18px 16px 22px; }
    .btn { align-self: stretch; }
    .dev input { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
    .box, .line, .cursor, .spinner::before { animation: none !important; }
}