/* ============================================================
   PAGES DE CONNEXION / INSCRIPTION · d'après les frames Figma « SIGN IN »
   (1920 px) et « SIGN IN MOBILE » (393 px) : fond photo, menu pilule avec
   « Retour », carte vitrée au centre, champs en pilule grise, gros bouton
   noir. S'appuie sur site.css (jeton, menu).
   Ce fichier ne contient QUE de la mise en page : la logique est dans
   auth-connexion.js / auth-inscription.js.
   ============================================================ */
html, body{ min-height: 100%; }
body{ background: transparent; }
.auth-bg{ position: fixed; inset: 0; z-index: -1; background: #fff url(/assets/landing/auth-bg.jpg) center / cover no-repeat; }
.auth-page{ min-height: 100svh; display: flex; align-items: flex-start; justify-content: center; padding: clamp(120px, 11.6vw, 222px) 20px 60px; }

.auth-card{
  position: relative; width: min(537px, 100%); padding: clamp(34px, 3vw, 52px) clamp(22px, 2.4vw, 40px) clamp(30px, 2.6vw, 44px);
  border-radius: 30px; background: rgba(255,255,255,.34);
  -webkit-backdrop-filter: blur(16px) saturate(1.25); backdrop-filter: blur(16px) saturate(1.25);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.7), 0 30px 80px rgba(7,26,49,.08);
  animation: carteEntre .9s var(--ease) .1s backwards;
}
@keyframes carteEntre{ from{ opacity: 0; transform: translateY(34px) scale(.98); } to{ opacity: 1; transform: none; } }
.auth-card > div > *{ animation: champEntre .8s var(--ease) backwards; }
.auth-card > div > *:nth-child(1){ animation-delay: .25s; } .auth-card > div > *:nth-child(2){ animation-delay: .32s; }
.auth-card > div > *:nth-child(3){ animation-delay: .39s; } .auth-card > div > *:nth-child(4){ animation-delay: .46s; }
.auth-card > div > *:nth-child(5){ animation-delay: .53s; } .auth-card > div > *:nth-child(6){ animation-delay: .6s; }
@keyframes champEntre{ from{ opacity: 0; transform: translateY(16px); } to{ opacity: 1; transform: none; } }

.auth-kicker{ display: none; }
.auth-title{ margin: 0; text-align: center; font-size: clamp(30px, 2.5vw, 48px); font-weight: 600; letter-spacing: -.04em; line-height: 1.14; color: var(--ink); text-wrap: balance; }
.auth-sub{ margin: 14px auto 0; max-width: 24em; text-align: center; font-size: 14.5px; line-height: 1.5; color: #656565; }

.auth-form{ margin-top: clamp(24px, 2.4vw, 36px); display: grid; gap: 18px; }
.field label{ display: block; margin: 0 0 8px 16px; font-size: 13.5px; font-weight: 500; color: #656565; }
.field input[type="email"], .field input[type="password"], .field input[type="text"]{
  width: 100%; height: 60px; padding: 0 24px; border-radius: 40px; border: 1.5px solid transparent; background: #f2f2f2; color: var(--ink);
  font: inherit; font-size: 15px; outline: none; transition: background .25s, border-color .25s, box-shadow .25s;
}
.field input::placeholder{ color: #8d8d8d; }
.field input:focus{ background: #fff; border-color: #000; box-shadow: 0 0 0 5px rgba(0,0,0,.06); }
.field-password{ position: relative; }
.field-password input{ padding-right: 66px !important; }
.field-eye{
  position: absolute; right: 9px; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; padding: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; background: #fff; color: #656565; box-shadow: 0 0 0 1px rgba(7,26,49,.08), 0 4px 10px rgba(7,26,49,.06);
  transition: background .3s, color .3s, box-shadow .3s, transform .35s var(--ease);
}
.field-eye svg{ width: 22px; height: 22px; overflow: visible; }
.field-eye .slash{ stroke-dasharray: 24; stroke-dashoffset: 0; transition: stroke-dashoffset .4s var(--ease); }
.field-eye:hover{ color: #000; box-shadow: 0 0 0 1px rgba(7,26,49,.2), 0 6px 14px rgba(7,26,49,.1); transform: translateY(-50%) scale(1.06); }
.field-eye.on{ background: #000; color: #fff; box-shadow: 0 6px 16px rgba(0,0,0,.25); }
.field-eye.on .slash{ stroke-dashoffset: 24; }
.field-hint{ margin: 10px 0 0 16px; font-size: 12px; line-height: 1.4; color: #8d8d8d; }

/* Conditions du mot de passe : elles s'allument au fil de la frappe */
.pw-rules{ display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0 12px; }
.pw-rules span{ display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 100px; background: rgba(0,0,0,.05); color: #8d8d8d; font-size: 12px; font-weight: 500; transition: background .3s, color .3s; }
.pw-rules span::before{ content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .5; transition: opacity .3s; }
.pw-rules span.ok{ background: rgba(34,160,98,.14); color: #14804a; }
.pw-rules span.ok::before{ opacity: 1; }

.auth-forgot{ margin: -6px 16px 0 0; text-align: right; }
.auth-forgot button, .auth-back button{ font-size: 13.5px; color: #656565; text-decoration: underline; text-underline-offset: 3px; transition: color .2s; }
.auth-forgot button:hover, .auth-back button:hover{ color: #000; }
.auth-back{ margin: 18px 0 0; text-align: center; }

.field-check{ display: flex; align-items: flex-start; gap: 12px; margin: 2px 6px 0; font-size: 13px; line-height: 1.45; color: #656565; cursor: pointer; }
.field-check input{ flex: none; width: 20px; height: 20px; margin: 0; accent-color: #000; cursor: pointer; }
.field-check a{ color: #1e1e1e; text-decoration: underline; text-underline-offset: 2px; }

.promo-chip{ display: none; align-items: center; gap: 10px; margin: 18px 0 0; padding: 10px 16px; border-radius: 20px; background: rgba(79,94,255,.1); color: #3a43b8; font-size: 13px; line-height: 1.4; }
.promo-chip.is-visible{ display: flex; }
.promo-chip b{ font-weight: 700; }

.auth-error{ margin: 0; padding: 12px 18px; border-radius: 20px; background: rgba(220,38,38,.09); color: #b42318; font-size: 13.5px; line-height: 1.45; text-align: center; }
.auth-error[hidden]{ display: none; }
.auth-error a{ color: inherit; font-weight: 600; text-decoration: underline; }

.auth-submit-wrap{ margin-top: 10px; text-align: center; }
.auth-submit{
  position: relative; min-width: min(279px, 100%); height: 64px; padding: 0 36px; border-radius: 75px; background: #000; color: #fff;
  font-size: 18px; font-weight: 500; letter-spacing: -.01em; box-shadow: 0 12px 30px rgba(0,0,0,.18);
  transition: transform .3s var(--ease), box-shadow .3s, opacity .2s;
}
.auth-submit:hover{ transform: translateY(-2px); box-shadow: 0 18px 40px rgba(0,0,0,.26); }
.auth-submit:disabled{ opacity: .85; cursor: default; transform: none; }
.auth-submit .spin{ display: none; position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; border: 2.5px solid rgba(255,255,255,.35); border-top-color: #fff; animation: tourne .7s linear infinite; }
.auth-submit.loading .spin{ display: block; }
.auth-submit.loading .label{ opacity: 0; }
@keyframes tourne{ to{ transform: rotate(360deg); } }

.auth-switch{ margin: 22px 0 0; text-align: center; font-size: 16px; color: #656565; }
.auth-switch a{ color: #1e1e1e; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.auth-switch a:hover{ color: #000; }

.auth-success{ text-align: center; padding: 14px 4px 4px; }
.auth-success-icon{ width: 64px; height: 64px; margin: 0 auto 18px; border-radius: 50%; background: #000; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 28px; animation: pop2 .7s var(--ease) backwards; }
@keyframes pop2{ from{ transform: scale(.4); opacity: 0; } to{ transform: none; opacity: 1; } }
.auth-success h2{ margin: 0; font-size: clamp(24px, 2vw, 32px); font-weight: 600; letter-spacing: -.035em; }
.auth-success p{ margin: 12px auto 0; max-width: 24em; font-size: 15px; line-height: 1.5; color: #656565; }
[hidden]{ display: none !important; }

@media (max-width: 900px){
  .auth-bg{ background-image: url(/assets/landing/auth-bg-mobile.jpg); }
  .auth-page{ padding-top: calc(150px + env(safe-area-inset-top, 0px)); }
  .auth-card{ border-radius: 22px; }
  .field input[type="email"], .field input[type="password"], .field input[type="text"]{ height: 52px; font-size: 16px; }
  .field-eye{ width: 38px; height: 38px; }
  .auth-submit{ height: 56px; font-size: 16px; }
  .auth-switch{ font-size: 14.5px; }
}
@media (prefers-reduced-motion: reduce){
  .auth-card, .auth-card > div > *, .auth-success-icon{ animation: none !important; }
}