/* DA reprise de thrpub.fr */
:root {
  color-scheme: dark;
  --bg: #050505; --card: #0f0f0f; --card-2: #151515; --text: #f4f4f1; --muted: #a0a09c; --dim: #6c6c69;
  --line: rgba(255,255,255,.08); --line-2: rgba(255,255,255,.14); --grid-line: rgba(255,255,255,.055);
  --down: #f87171; --ease: cubic-bezier(.22,1,.36,1);
  --f-display: "Inter Tight", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-body: "Geist", "Inter Tight", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-serif: "Instrument Serif", "Times New Roman", Georgia, serif;
}
* { box-sizing: border-box; }
::selection { background: #fff; color: #000; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; padding: 16px; overflow-x: hidden;
       background: var(--bg); color: var(--text); font: 15px/1.55 var(--f-body); -webkit-font-smoothing: antialiased; }
body::before, body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; }
body::before { background: radial-gradient(700px 500px at 50% 0%, rgba(255,255,255,.1), transparent 70%); }
body::after {
  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 72px 72px; opacity: .75;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 28%, transparent 85%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 28%, transparent 85%);
}
.box { width: 100%; max-width: 420px; background: linear-gradient(180deg, var(--card-2), var(--card)); border: 1px solid var(--line);
       border-radius: 28px; padding: 32px 28px; box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.logo { display: block; width: 40px; height: 40px; margin-bottom: 22px; }
h1 { font-family: var(--f-display); font-weight: 500; font-size: 34px; line-height: 1; letter-spacing: -.045em; margin: 0 0 10px; }
h1 .serif, .serif { font-family: var(--f-serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; color: #8d8d8d; }
p { color: var(--muted); margin: 0 0 22px; font-size: 14.5px; }
label { display: block; font-size: 13px; color: var(--muted); margin: 16px 0 7px; }
input { width: 100%; height: 48px; font: inherit; color: var(--text); background: rgba(0,0,0,.4); border: 1px solid var(--line);
        border-radius: 14px; padding: 0 16px; outline: none; transition: .2s; }
input:focus { border-color: rgba(255,255,255,.4); box-shadow: 0 0 0 4px rgba(255,255,255,.06); }
button { position: relative; isolation: isolate; width: 100%; height: 52px; margin-top: 26px; cursor: pointer; border: 0; border-radius: 999px;
         font-family: var(--f-display); font-size: 15px; font-weight: 500; letter-spacing: -.01em;
         background: var(--text); color: #050505; transition: transform .5s var(--ease), background-color .3s; }
button::before { content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; opacity: 0; transition: opacity .5s var(--ease);
                 background: linear-gradient(100deg, #f7ec2e, #6ee81a 50%, #18f0ff); filter: blur(18px); }
button:hover { background: #fff; } button:hover::before { opacity: .28; }
button:active { transform: scale(.97); }
button:disabled { opacity: .6; cursor: wait; }
:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
input:focus-visible { outline: none; }
.error { color: var(--down); font-size: 13px; min-height: 18px; margin-top: 12px; }
/* Mobile : pas de zoom au double tap, et des champs en 16 px (sous 16 px, l'iPhone zoome dessus) */
html { touch-action: manipulation; -webkit-text-size-adjust: 100%; }
@media (max-width: 900px) { input { font-size: 16px; } }