/* =========================================================
   Inscription athlète (OtiumForge)
   Bande vidéo, 3 étapes, formulaire défilant, barre d'action fixe.
   Autonome, aucune dépendance.
   ========================================================= */

: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);
  --line: rgba(255,255,255,.08);
  --text: #ffffff;
  --text-dim: rgba(255,255,255,.45);
  --text-faint: rgba(255,255,255,.4);

  --font-display: Archivo, system-ui, -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --hex: polygon(50% 0%, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%);
}

* { box-sizing: border-box }
*, *::-webkit-scrollbar { 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;
  overflow-x: hidden;
}

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

/* ---------- Bande photo / vidéo ---------- */
.signup__hero {
  position: relative; height: 186px; flex: none;
  /* Repli quand la vidéo n'est pas encore chargée / absente. */
  background: linear-gradient(160deg, #33271f 0%, #201a17 55%, var(--bg) 100%);
}
.signup__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover }
.signup__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(22,21,20,.6) 0%, rgba(22,21,20,.1) 30%,
                              rgba(22,21,20,.92) 82%, var(--bg) 100%);
}
.signup__topbar {
  position: absolute; top: 22px; left: 22px; right: 22px;
  display: flex; justify-content: space-between; align-items: center;
  pointer-events: none; font: 500 9.5px var(--font-mono); letter-spacing: .22em;
}
.signup__brand { color: rgba(255,255,255,.8) }
.signup__step { letter-spacing: .16em; color: rgba(255,255,255,.55) }
.signup__claim {
  position: absolute; left: 22px; bottom: 46px; pointer-events: none;
  font: 900 30px/1.06 var(--font-display); letter-spacing: -.04em;
  animation: rise .55s .16s both;
}
/* redondant avec le pied de la barre d'action sur mobile -> visible en desktop */
.signup__hero-note { display: none }

/* ---------- Les 3 étapes ---------- */
.steps {
  flex: none; display: flex; gap: 8px; list-style: none;   /* pas de puces "1. 2. 3." */
  padding: 0 22px; margin: -26px 0 0; position: relative; z-index: 1;
  animation: rise .5s .26s both;
}
.step {
  flex: 1; border-radius: 10px; padding: 9px 10px; min-width: 0;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1);
}
.step__num { display: block; font: 600 9px var(--font-mono); color: rgba(255,255,255,.35) }
.step__label { display: block; font: 500 10.5px/1.25 var(--font-display); color: var(--text-dim); margin-top: 5px }
.step--active { background: rgba(181,83,43,.16); border-color: rgba(181,83,43,.42) }
.step--active .step__num { color: var(--accent-light) }
.step--active .step__label { font-weight: 600; color: var(--text) }

/* ---------- Zone défilante ---------- */
.signup__body { flex: 1; min-height: 0; overflow-y: auto; padding: 20px 22px 16px }
.signup__title { font: 900 20px/1.1 var(--font-display); letter-spacing: -.03em; margin: 0; animation: rise .5s .34s both }
.signup__sub { font: 400 12.5px var(--font-display); color: var(--text-dim); margin: 7px 0 0; animation: rise .5s .4s both }

/* ---------- Formulaire ---------- */
.form { display: flex; flex-direction: column; gap: 13px; margin-top: 18px; animation: rise .5s .46s both }
.row { display: flex; gap: 10px }
.row > .field { flex: 1 }
.field { display: flex; flex-direction: column; gap: 7px }
.field__label { font: 500 9px var(--font-mono); letter-spacing: .2em; color: var(--text-faint) }
.field__hint { font: 400 10.5px var(--font-display); color: var(--text-faint) }
.field__error { font: 400 10.5px var(--font-display); color: #f2b7ab }

.input {
  width: 100%; min-height: 48px;
  border: 1px solid var(--field-border); border-radius: 12px;
  background: var(--field); padding: 0 13px;
  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) }

/* Force du mot de passe : data-level = 0 → 4 */
.strength { display: flex; gap: 4px; margin-top: 2px }
.strength i { flex: 1; height: 3px; border-radius: 2px; background: rgba(255,255,255,.12) }
.strength[data-level="1"] i:nth-child(-n+1),
.strength[data-level="2"] i:nth-child(-n+2),
.strength[data-level="3"] i:nth-child(-n+3),
.strength[data-level="4"] i:nth-child(-n+4) { background: var(--accent) }
.strength[data-level="4"] i { background: #8ad0b4 }

/* ---------- Consentements ---------- */
.consents {
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px; margin-top: 18px; animation: rise .5s .54s both;
}
.consent {
  display: flex; gap: 11px; padding: 13px 14px; cursor: pointer;
  border-top: 1px solid var(--line);
}
.consent:first-child { border-top: 0 }
.consent input { position: absolute; opacity: 0; width: 0; height: 0 }
.consent__box {
  width: 20px; height: 20px; border-radius: 6px; flex: none;
  border: 1.5px solid rgba(255,255,255,.28);
  display: flex; align-items: center; justify-content: center;
  transition: background .18s, border-color .18s;
}
.consent__box::after {
  content: "✓"; font: 700 12px var(--font-display); color: #fff;
  opacity: 0; transform: scale(.6); transition: opacity .15s, transform .15s;
}
.consent input:checked + .consent__box { background: var(--accent); border-color: var(--accent) }
.consent input:checked + .consent__box::after { opacity: 1; transform: scale(1) }
.consent input:focus-visible + .consent__box { outline: 2px solid var(--accent); outline-offset: 2px }
.consent__text { font: 400 11.5px/1.45 var(--font-display); color: rgba(255,255,255,.72) }
.consent__text a { color: var(--accent-light); text-decoration: none }
.consent__text a:hover { text-decoration: underline }
.consent--optional .consent__text { color: var(--text-dim) }
.consent__opt { color: rgba(255,255,255,.35) }

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

/* ---------- Barre d'action fixe ---------- */
.actionbar {
  flex: none; padding: 14px 22px calc(22px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(22,21,20,0), var(--bg) 34%);
  border-top: 1px solid rgba(255,255,255,.07);
  animation: rise .5s .62s both;
}
.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;
  position: relative; overflow: hidden; transition: background .18s;
}
.submit:hover { background: var(--accent-hover) }
.submit:disabled { opacity: .55; cursor: not-allowed }
.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;
}
.actionbar__foot {
  font: 400 12.5px var(--font-display); color: var(--text-dim);
  text-align: center; margin: 13px 0 0;
}
.actionbar__foot a { color: var(--accent-light); font-weight: 600; text-decoration: none }
.actionbar__foot a:hover { text-decoration: underline }

/* ---------- Desktop : carte deux colonnes (grille) ----------
   Colonne gauche = panneau vidéo (pleine hauteur) ; colonne droite = formulaire
   au-dessus, barre d'action en dessous, tous deux DANS le flux (pas d'absolu →
   plus de chevauchement quel que soit le nombre de champs/consentements). */
@media (min-width: 900px) {
  body { display: flex; align-items: center; justify-content: center; padding: 40px 20px }
  .signup {
    height: auto; min-height: 0; width: 900px; max-width: 100%;
    display: grid; grid-template-columns: 330px 1fr; grid-template-rows: 1fr auto;
    grid-template-areas: "hero body" "hero actionbar";
    background: var(--panel); overflow: hidden;
    border: 1px solid rgba(255,255,255,.08); border-radius: 20px;
    box-shadow: 0 30px 70px rgba(0,0,0,.45);
  }

  /* colonne gauche : la bande devient un panneau plein hauteur */
  .signup__hero {
    grid-area: hero; width: auto; height: auto;
    display: flex; flex-direction: column; justify-content: space-between;
    padding: 34px 30px;
  }
  .signup__scrim {
    background: linear-gradient(165deg, rgba(28,27,25,.88) 0%, rgba(28,27,25,.6) 46%,
                                rgba(181,83,43,.58) 100%);
  }
  .signup__topbar { position: static; padding: 0 }
  .signup__step { display: none }
  .signup__claim { position: static; font-size: 34px; line-height: 1.08 }
  .signup__hero-note {
    display: block; position: relative;
    font: 400 12px/1.5 var(--font-display); color: var(--text-dim);
  }
  .signup__hero-note a { color: var(--accent-light); font-weight: 600; text-decoration: none }

  /* étapes : cue d'onboarding gardée sur mobile ; masquée en desktop (place au form) */
  .steps { display: none }

  /* colonne droite : formulaire (haut) + barre d'action (bas), dans le flux */
  .signup__body { grid-area: body; overflow: visible; padding: 34px 36px 6px }
  .signup__title { font-size: 26px }
  .form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 22px }
  .row { display: contents }
  .form > .field--wide { grid-column: 1 / -1 }
  .input { min-height: 50px }
  .consents { grid-column: 1 / -1 }
  .actionbar {
    grid-area: actionbar; position: static;
    background: none; border: 0; padding: 6px 36px 32px;
  }
}

/* ---------- Animations ---------- */
@keyframes rise { from { transform: translateY(18px); opacity: 0 } to { transform: translateY(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 }
}