@import url('https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:wght@400;500;600;700;800;900&display=swap');

/* =========================================================
   Connexion athlète (OtiumForge) — design « sceau hexagonal »
   Photo/vidéo en haut, sceau à cheval, panneau opaque.
   Autonome, aucune dépendance JS.
   ========================================================= */

:root {
  --bg: #161514;
  --panel: #1c1b19;
  --accent: #b5532b;
  --accent-hover: #cc5f31;
  --accent-light: #f0a97e;
  --field: rgba(255,255,255,.05);
  --field-focus: rgba(255,255,255,.08);
  --field-border: rgba(255,255,255,.14);
  --text: #ffffff;
  --text-dim: rgba(255,255,255,.5);
  --text-faint: rgba(255,255,255,.4);

  --font-display: "Schibsted Grotesk", system-ui, -apple-system, sans-serif;
  --font-mono: "Schibsted Grotesk", system-ui, -apple-system, sans-serif;
  --hex: polygon(50% 0%, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%);
}

* { box-sizing: border-box }
* { scrollbar-width: none }
*::-webkit-scrollbar { display: none }        /* scrollbars masquées (préférence) */
html, body { height: 100% }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--font-display); -webkit-font-smoothing: antialiased;
}

/* ---------- Ossature ---------- */
.login {
  min-height: 100dvh; display: flex; flex-direction: column;
  max-width: 480px; margin: 0 auto; position: relative; overflow: hidden;
}

/* ---------- Bande photo ----------
   Hauteur du bandeau = seule variable à changer si tu veux plus/moins de photo.
   --hero-h (mobile) et le @media desktop plus bas. */
.login__hero {
  position: relative; height: var(--hero-h, 420px); flex: none;
  /* Repli quand aucune photo/vidéo n'est fournie : dégradé chaleureux. */
  background: linear-gradient(160deg, #33271f 0%, #201a17 55%, var(--bg) 100%);
}
.login__media { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center top }
.login__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(22,21,20,.55) 0%, rgba(22,21,20,0) 34%,
                              rgba(22,21,20,.9) 84%, var(--bg) 100%);
}
.login__topbar {
  position: absolute; top: 22px; left: 22px; right: 22px;
  display: flex; justify-content: space-between; align-items: center;
  pointer-events: none;
  font: 600 10px var(--font-display); letter-spacing: .05em;
}
.login__brand { color: rgba(255,255,255,.85) }
.login__space { letter-spacing: .04em; color: rgba(255,255,255,.55) }

/* ---------- Corps, remonté sur la photo ---------- */
.login__body {
  position: relative; flex: 1;
  display: flex; flex-direction: column; align-items: center;
  padding: 0 24px 26px; margin-top: -74px;
}

/* ---------- Sceau hexagonal ---------- */
.seal {
  position: relative; width: 124px; height: 138px; flex: none;
  filter: drop-shadow(0 14px 30px rgba(0,0,0,.65));
  animation: pop .75s .18s cubic-bezier(.34,1.4,.5,1) both;
}
.seal__ring {
  position: absolute; inset: 0; clip-path: var(--hex);
  background: linear-gradient(150deg, #e0864f, var(--accent) 46%, #8d3f1f);
}
.seal__face {
  position: absolute; inset: 6px; clip-path: var(--hex); background: var(--bg);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  overflow: hidden;
}
.seal__shine {
  position: absolute; top: 0; left: 0; width: 32%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent);
  animation: shimmer 3.2s 1s ease-in-out infinite;
}
.seal__letter { font: 800 42px/1 var(--font-display); letter-spacing: -.02em }
.seal__rule { width: 22px; height: 2px; background: var(--accent); margin: 9px 0 7px }
.seal__label { font: 600 8.5px var(--font-display); letter-spacing: .1em; color: rgba(255,255,255,.55) }

/* ---------- Titres ---------- */
.login__title {
  font: 700 27px/1.18 var(--font-display); letter-spacing: -.008em;
  text-align: center; margin: 22px 0 0;
  animation: rise .5s .38s both;
}
.login__sub {
  font: 400 13px/1.5 var(--font-display); color: var(--text-dim);
  text-align: center; margin: 8px 0 0;
  animation: rise .5s .46s both;
}

/* ---------- Formulaire ---------- */
.form {
  width: 100%; display: flex; flex-direction: column; gap: 13px; margin-top: 24px;
  animation: rise .5s .54s both;
}
.field { display: flex; flex-direction: column; gap: 7px }
.field__head { display: flex; justify-content: space-between; align-items: baseline }
.field__label { font: 600 11px var(--font-display); letter-spacing: .01em; text-transform: lowercase; color: var(--text-dim) }
.field__link { font: 500 11px var(--font-display); color: var(--accent-light); text-decoration: none }
.field__link:hover { text-decoration: underline }

.input {
  width: 100%; min-height: 50px;
  border: 1px solid var(--field-border); border-radius: 12px;
  background: var(--field); padding: 0 14px;
  font: 400 14px var(--font-display); color: var(--text);
  outline: none; transition: border-color .18s, background .18s;
}
.input::placeholder { color: rgba(255,255,255,.3) }
.input:focus { border-color: var(--accent); background: var(--field-focus) }
.input[aria-invalid="true"] { border-color: #e0644a; background: rgba(224,100,74,.08) }

.check { display: flex; align-items: center; gap: 10px; cursor: pointer; margin-top: 2px }
.check input { position: absolute; opacity: 0; width: 0; height: 0 }
.check__box {
  width: 20px; height: 20px; border-radius: 6px;
  border: 1.5px solid rgba(255,255,255,.28); flex: none;
  display: flex; align-items: center; justify-content: center;
  transition: background .18s, border-color .18s;
}
.check__box::after {
  content: "✓"; font: 700 12px var(--font-display); color: #fff;
  opacity: 0; transform: scale(.6); transition: opacity .15s, transform .15s;
}
.check input:checked + .check__box { background: var(--accent); border-color: var(--accent) }
.check input:checked + .check__box::after { opacity: 1; transform: scale(1) }
.check input:focus-visible + .check__box { outline: 2px solid var(--accent); outline-offset: 2px }
.check__label { font: 400 13px var(--font-display); color: rgba(255,255,255,.62) }

.submit {
  width: 100%; min-height: 52px; border: none; border-radius: 12px;
  background: var(--accent); color: #fff;
  font: 600 14.5px var(--font-display); cursor: pointer; margin-top: 3px;
  position: relative; overflow: hidden; transition: background .18s;
}
.submit:hover { background: var(--accent-hover) }
.submit:focus-visible { outline: 2px solid #fff; outline-offset: -4px }
.submit__shine {
  position: absolute; top: 0; left: 0; width: 30%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.3), transparent);
  animation: shimmer 3s 1.4s ease-in-out infinite;
}

/* ---------- Erreur ---------- */
.alert {
  width: 100%; display: flex; gap: 10px; align-items: flex-start;
  border-left: 2px solid #e0644a; background: rgba(224,100,74,.1);
  padding: 11px 13px; margin-top: 18px;
  font: 400 12.5px/1.45 var(--font-display); color: #f2b7ab;
  animation: rise .4s both;
}
.field .alert { margin-top: 2px }

/* ---------- Pied ---------- */
.login__foot {
  font: 400 12.5px var(--font-display); color: rgba(255,255,255,.45);
  text-align: center; margin-top: auto; padding-top: 22px;
  animation: rise .5s .64s both;
}
.login__foot a { color: var(--accent-light); font-weight: 600; text-decoration: none }
.login__foot a:hover { text-decoration: underline }

/* ---------- Desktop : carte centrée ---------- */
@media (min-width: 720px) {
  body { display: flex; align-items: center; justify-content: center; padding: 40px 20px }
  .login {
    min-height: 0; width: 470px; max-width: 100%;
    background: var(--panel);
    border: 1px solid rgba(255,255,255,.08); border-radius: 20px;
    box-shadow: 0 30px 70px rgba(0,0,0,.45);
  }
  .login__hero { height: 360px }
  .login__scrim {
    background: linear-gradient(180deg, rgba(28,27,25,.5) 0%, rgba(28,27,25,0) 30%,
                                rgba(28,27,25,.9) 82%, var(--panel) 100%);
  }
  .login__body { padding: 0 44px 28px; margin-top: -62px }
  .seal { width: 106px; height: 118px }
  .seal__face { inset: 5px; background: var(--panel) }
  .seal__letter { font-size: 36px }
  .login__title { font-size: 28px; margin-top: 20px }
  .login__foot { margin-top: 22px; padding-top: 0 }
}

/* ---------- Animations ---------- */
@keyframes rise { from { transform: translateY(18px); opacity: 0 } to { transform: translateY(0); opacity: 1 } }
@keyframes pop {
  0% { transform: scale(.5) rotate(-14deg); opacity: 0 }
  58% { transform: scale(1.09) rotate(4deg); opacity: 1 }
  100% { transform: scale(1) rotate(0); opacity: 1 }
}
@keyframes shimmer { 0% { transform: translateX(-130%) skewX(-16deg) } 100% { transform: translateX(420%) skewX(-16deg) } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important }
}