/* ============================================================
   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"], .field input[type="tel"]{
  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: 10px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; padding: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; background: transparent; color: #9a9aa0; box-shadow: none;
  transition: color .25s, background .25s, transform .2s var(--ease);
}
.field-eye svg{ width: 21px; height: 21px; overflow: visible; }
.field-eye .slash{ stroke-dasharray: 24; stroke-dashoffset: 0; transition: stroke-dashoffset .35s var(--ease); }
.field-eye:hover{ color: #000; background: rgba(0,0,0,.05); }
.field-eye:active{ transform: translateY(-50%) scale(.92); }
.field-eye.on{ color: #000; }
.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 */
/* Jauge de force : cinq segments qui occupent TOUTE la largeur du champ, et dessous
   cinq tuiles de même taille, une par critère, qui s'allument une à une. */
.pw-meter{ display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin: 16px 0 0; }
.pw-meter i{ height: 6px; border-radius: 99px; background: rgba(0,0,0,.08); transition: background .3s; }
.pw-meter[data-n="1"] i.on, .pw-meter[data-n="2"] i.on{ background: #e5654f; }
.pw-meter[data-n="3"] i.on{ background: #e9a23b; }
.pw-meter[data-n="4"] i.on, .pw-meter[data-n="5"] i.on{ background: #22a062; }
.pw-meter-line{ display: flex; justify-content: space-between; margin: 8px 2px 0; font-size: 12px; color: #8d8d8d; }
.pw-meter-line b{ font-weight: 600; color: #444; }
.pw-rules{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 14px 0 0; }
.pw-rules span{ display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; padding: 12px 4px 10px; border-radius: 18px; background: rgba(0,0,0,.05); color: #8d8d8d; font-size: 11.5px; font-weight: 500; line-height: 1.2; text-align: center; transition: background .3s, color .3s, transform .3s var(--ease); }
.pw-rules span em{ font-style: normal; width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.07); color: #656565; font-size: 12px; font-weight: 700; transition: background .3s, color .3s; }
.pw-rules span.ok{ background: rgba(34,160,98,.14); color: #14804a; font-weight: 600; transform: translateY(-1px); }
.pw-rules span.ok em{ background: #22a062; color: #fff; }
@media (max-width: 420px){ .pw-rules{ gap: 4px; } .pw-rules span{ font-size: 10.5px; padding: 10px 2px 8px; border-radius: 14px; } .pw-rules span em{ width: 22px; height: 22px; font-size: 11px; } }

/* Barre des trois temps, et animation d'arrivée de chaque temps. */
.auth-progress{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 22px auto 0; max-width: 220px; }
.auth-progress i{ height: 4px; border-radius: 99px; background: rgba(0,0,0,.1); transition: background .35s; }
.auth-progress i.on{ background: #000; }
.auth-step{ display: grid; gap: 18px; }
.auth-step[hidden]{ display: none; }
.auth-step.in{ animation: champEntre .45s var(--ease) both; }
.auth-form{ grid-template-columns: 1fr; }
.field label .opt{ font-weight: 400; color: #8d8d8d; }
/* Pas de trait de séparation après le logo, dans l'en-tête de la page d'inscription. */
body.page-inscription .nav-logo::after{ display: none; }

.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"], .field input[type="tel"]{ 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; }
}

/* Code de parrainage : facultatif, replié par défaut (10 octobre 2026) */
.field-parrain{ margin: 2px 0 14px; border-radius: 18px; background: #F5F5F7; overflow: hidden; }
.field-parrain summary{ list-style: none; display: flex; align-items: center; gap: 10px; padding: 13px 16px; cursor: pointer; font-size: 14px; font-weight: 600; color: #3a3d46; user-select: none; }
.field-parrain summary::-webkit-details-marker{ display: none; }
.field-parrain .fp-ic{ width: 28px; height: 28px; border-radius: 9px; background: #fff; display: grid; place-items: center; color: #141416; box-shadow: 0 0 0 1px rgba(20,20,30,.08) inset; }
.field-parrain .fp-ic svg{ width: 16px; height: 16px; }
.field-parrain .fp-chev{ margin-left: auto; width: 8px; height: 8px; border-right: 2px solid #8a8f9c; border-bottom: 2px solid #8a8f9c; transform: rotate(45deg); transition: transform .25s ease; margin-top: -3px; }
.field-parrain[open] .fp-chev{ transform: rotate(-135deg); margin-top: 3px; }
.field-parrain .fp-corps{ padding: 0 16px 16px; display: grid; gap: 8px; animation: fpOuvre .25s ease both; }
@keyframes fpOuvre{ from{ opacity: 0; transform: translateY(-4px); } to{ opacity: 1; transform: none; } }
.field-parrain input{ height: 48px; border: 0; border-radius: 14px; padding: 0 16px; background: #fff; box-shadow: 0 0 0 1px rgba(20,20,30,.1) inset; font: inherit; font-size: 16px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #141416; outline: 0; }
.field-parrain input:focus{ box-shadow: 0 0 0 2px #141416 inset; }
.field-parrain small{ font-size: 12.5px; line-height: 1.45; color: #7a7f8c; }

/* Le critère « 10 caractères » reste vérifié (il compte dans la jauge) mais n'a pas de tuile : le champ le dit déjà. */
.pw-rules .pw-masque{ display: none; }

/* Bouton pour revenir à l'étape d'avant : une pastille douce, pas un lien souligné. */
body.page-inscription .auth-back{ margin: 16px 0 0; }
body.page-inscription .auth-back button{ display: inline-flex; align-items: center; gap: 6px; padding: 9px 18px 9px 12px; border-radius: 99px; background: rgba(255,255,255,.7); box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); font-size: 13.5px; font-weight: 500; color: #444; text-decoration: none; transition: background .2s, box-shadow .2s, transform .2s var(--ease); }
body.page-inscription .auth-back button svg{ width: 16px; height: 16px; transition: transform .25s var(--ease); }
body.page-inscription .auth-back button:hover{ background: #fff; color: #000; box-shadow: inset 0 0 0 1px rgba(0,0,0,.18); }
body.page-inscription .auth-back button:hover svg{ transform: translateX(-3px); }
body.page-inscription .auth-back button:active{ transform: scale(.97); }