/**
 * @author Gilles Capelluto - MOLDEREZ-CONSULT
 * @purpose-fr Présentation TECH PREMIUM de la connexion UFoundMe!, isolée du moteur d'authentification.
 * @purpose-en TECH PREMIUM presentation for UFoundMe! login, isolated from the authentication engine.
 * @audit-scope auth-ui
 * @inputs-fr Les états et textes sont produits côté serveur; cette feuille ne change ni session ni jeton.
 * @inputs-en States and copy are server-rendered; this sheet changes neither sessions nor tokens.
 * @effects-fr Présentation responsive uniquement, avec priorité au formulaire sur petit écran.
 * @effects-en Responsive presentation only, with the form prioritised on small screens.
 */

/* The auth flow is noindex: keep its breadcrumb available to assistive
 * technology without inserting a raw list between the two navigation bars. */
.auth-page-ufoundme > .ufm-breadcrumb--task {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* One visual object replaces the former floating columns. This reduces the
 * number of competing surfaces while retaining all authentication choices. */
.auth-page-ufoundme .auth-login-shell {
  width: min(74rem, calc(100% - 3rem));
  min-height: 0;
  margin: clamp(2rem, 5vh, 4.5rem) auto clamp(3rem, 7vh, 6rem);
  padding: .625rem;
  grid-template-columns: minmax(0, 1.06fr) minmax(24rem, .94fr);
  gap: 0;
  align-items: stretch;
  border: 1px solid rgba(44, 30, 68, .12);
  border-radius: 2rem;
  background: rgba(255, 255, 255, .78);
  box-shadow: 0 2rem 5rem rgba(29, 19, 47, .13);
}

.auth-page-ufoundme .auth-login-shell .auth-story {
  position: relative;
  isolation: isolate;
  min-height: 39rem;
  padding: clamp(2.25rem, 4vw, 3.75rem);
  overflow: hidden;
  border-radius: 1.5rem;
  display: flex;
  flex-direction: column;
  color: #fff;
  background:
    radial-gradient(circle at 88% 12%, rgba(66, 205, 226, .28), transparent 28%),
    radial-gradient(circle at 12% 92%, rgba(255, 112, 77, .22), transparent 27%),
    linear-gradient(142deg, #171327 0%, #2b1d45 52%, #214f70 100%);
}

.auth-page-ufoundme .auth-login-shell .auth-story::after {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(circle, rgba(129, 224, 235, .34) 0 2px, transparent 2.5px);
  background-size: 7rem 7rem;
  background-position: 1.5rem 1.5rem;
  opacity: .22;
  content: '';
  pointer-events: none;
}

.auth-page-ufoundme .auth-login-shell .kicker {
  color: #d8f8fb;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .14em;
}

.auth-page-ufoundme .auth-login-shell .kicker::before {
  background: #ff704d;
  box-shadow: 0 0 0 .32rem rgba(255, 112, 77, .12);
}

.auth-page-ufoundme .auth-login-shell .auth-story h1,
.auth-page-ufoundme .auth-login-shell .auth-story h1::first-line {
  max-width: 31rem;
  margin: 1.15rem 0 1rem;
  color: #fff;
  font-size: clamp(2.65rem, 4.25vw, 4.25rem);
  font-weight: 690;
  line-height: .98;
  letter-spacing: -.06em;
  text-wrap: balance;
}

.auth-page-ufoundme .auth-login-shell .auth-story > p {
  max-width: 31rem;
  margin: 0;
  color: rgba(255, 255, 255, .76);
  font-size: .9rem;
  line-height: 1.65;
}

.auth-page-ufoundme .auth-login-shell .story-points {
  margin: 1.65rem 0 1.25rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .65rem;
}

.auth-page-ufoundme .auth-login-shell .story-points > span {
  min-height: 4.8rem;
  padding: .85rem;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 1rem;
  align-items: flex-start;
  color: rgba(255, 255, 255, .88);
  background: rgba(255, 255, 255, .09);
  box-shadow: none;
  font-size: .68rem;
  line-height: 1.45;
  backdrop-filter: blur(.6rem);
}

.auth-page-ufoundme .auth-login-shell .ufm-auth-scene {
  height: 13.5rem;
  margin-top: auto;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 1.35rem;
  background: linear-gradient(135deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .06));
  box-shadow: none;
}

.auth-page-ufoundme .auth-login-shell .ufm-auth-scene::before {
  display: none;
  content: none;
}

.auth-page-ufoundme .auth-login-shell .ufm-auth-phone {
  width: 8rem;
  min-height: 12rem;
  bottom: -2rem;
  border-width: .35rem;
  border-radius: 1.55rem;
}

.auth-page-ufoundme .auth-login-shell .ufm-auth-phone > img {
  width: 3.65rem;
  height: 3.65rem;
}

.auth-page-ufoundme .auth-login-shell .ufm-auth-phone strong { font-size: 1rem; }
.auth-page-ufoundme .auth-login-shell .ufm-auth-badge { right: 12%; width: 3.4rem; }

/* The right-hand card is the action area. Its smaller measure and predictable
 * rhythm keep the choice, field and CTA visible together. */
.auth-page-ufoundme .auth-login-shell .auth-card {
  width: 100%;
  max-width: none;
  min-height: 100%;
  padding: clamp(2.25rem, 4vw, 4rem);
  overflow: visible;
  border: 0;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: transparent;
  box-shadow: none;
}

.auth-page-ufoundme .auth-login-shell .auth-card h2 {
  margin: 0 0 .35rem;
  color: #221832;
  font-size: clamp(1.65rem, 2.2vw, 2.1rem);
  line-height: 1.1;
  letter-spacing: -.045em;
}

.auth-page-ufoundme .auth-login-shell .auth-card > p {
  margin: 0 0 1.55rem;
  color: #71697b;
  font-size: .82rem;
}

.auth-page-ufoundme .auth-login-shell .auth-login-tabs {
  margin-bottom: .75rem;
  padding: .3rem;
  border: 1px solid #e6e0eb;
  border-radius: .9rem;
  background: #f4f1f7;
}

.auth-page-ufoundme .auth-login-shell .auth-login-tab {
  min-height: 3rem;
  border-radius: .68rem;
  color: #736b7c;
  font-size: .72rem;
  line-height: 1.2;
}

.auth-page-ufoundme .auth-login-shell .auth-login-tab.is-active {
  color: #fff;
  background: #4b3575;
  box-shadow: 0 .45rem 1rem rgba(75, 53, 117, .2);
}

.auth-page-ufoundme .auth-login-shell .auth-login-tab.is-active img { filter: brightness(0) invert(1); }
.auth-page-ufoundme .auth-login-shell .auth-login-help-ticker { min-height: 2.1rem; margin: 0 0 .8rem; color: #71697b; font-size: .73rem; line-height: 1.45; }
.auth-page-ufoundme .auth-login-shell .auth-login-panel { min-height: 0; }

.auth-page-ufoundme .auth-login-shell .auth-email-primary,
.auth-page-ufoundme .auth-login-shell .auth-password-form {
  padding: 1.1rem;
  border: 1px solid #ebe5ee;
  border-radius: 1rem;
  background: #fbfafc;
}

.auth-page-ufoundme .auth-login-shell label { color: #2b203b; font-size: .78rem; }
.auth-page-ufoundme .auth-login-shell label input {
  height: 3.25rem;
  border-color: #dcd5e2;
  border-radius: .75rem;
  color: #221832;
  background: #fff;
  font-size: .88rem;
}

.auth-page-ufoundme .auth-login-shell label input:focus {
  border-color: #4b3575;
  box-shadow: 0 0 0 .22rem rgba(75, 53, 117, .14);
}

.auth-page-ufoundme .auth-login-shell .auth-primary,
.auth-page-ufoundme .auth-login-shell .auth-secondary {
  min-height: 3.25rem;
  border-radius: .75rem;
}

.auth-page-ufoundme .auth-login-shell .auth-primary {
  color: #fff;
  background: #4b3575;
  box-shadow: 0 .75rem 1.5rem rgba(75, 53, 117, .2);
}

.auth-page-ufoundme .auth-login-shell .auth-primary:hover { background: #362454; }
.auth-page-ufoundme .auth-login-shell .auth-switch { margin-top: 1.1rem; color: #71697b; font-size: .74rem; }
.auth-page-ufoundme .auth-login-shell .auth-switch a { color: #4b3575; text-decoration: underline; text-underline-offset: .18rem; }

.auth-page-ufoundme .auth-login-shell .auth-alert {
  margin: 0 0 1rem;
  padding: .85rem 1rem;
  border: 1px solid #eadfe9;
  border-radius: .85rem;
  color: #5c4364;
  background: #faf5fa;
  font-size: .76rem;
}

.auth-page-ufoundme .auth-login-shell .auth-alert.error {
  border-color: #efb8bc;
  color: #8c2831;
  background: #fff1f2;
}

/* A sent Magic Link changes the card content, never the page geometry. */
.auth-page-ufoundme .auth-login-shell.auth-magic-sent .auth-card { justify-content: flex-start; }
.auth-page-ufoundme .auth-login-shell .ufm-magic-guidance { gap: .8rem; }

/* Magic-link confirmation is intentionally a real user gesture. Mail scanners
 * may open the URL, but only this same-origin POST can consume the token. */
.auth-page-ufoundme .auth-login-shell.auth-magic-confirm .auth-story { min-height: 32rem; }
.auth-page-ufoundme .auth-login-shell.auth-magic-confirm .auth-card { justify-content: center; }
.auth-page-ufoundme .ufm-magic-confirm-mark {
  width: 3.25rem;
  height: 3.25rem;
  margin-bottom: 1.25rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  background: #4b3575;
  box-shadow: 0 .75rem 1.5rem rgba(75, 53, 117, .22);
  font-size: 1.35rem;
  font-weight: 800;
}
.auth-page-ufoundme .ufm-magic-confirm-form { margin-top: .35rem; }
.auth-page-ufoundme .ufm-magic-confirm-form .auth-primary { width: 100%; }
.auth-page-ufoundme .ufm-magic-confirm-privacy { margin: 1rem 0 .5rem !important; color: #71697b; font-size: .73rem !important; }
.auth-page-ufoundme .ufm-magic-confirm-restart { align-self: flex-start; color: #4b3575; font-size: .74rem; font-weight: 700; }
.auth-page-ufoundme .ufm-magic-confirm-visual {
  position: relative;
  width: min(20rem, 90%);
  height: 9rem;
  margin: auto auto 0;
  border: 1px solid rgba(255,255,255,.17);
  border-radius: 1.4rem;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.08);
  overflow: hidden;
}
.auth-page-ufoundme .ufm-magic-confirm-visual > span { position: relative; z-index: 2; width: 4.5rem; height: 4.5rem; border-radius: 50%; display: grid; place-items: center; color: #171327; background: #d8f8fb; font-size: 2rem; font-weight: 900; box-shadow: 0 0 0 .65rem rgba(216,248,251,.12); }
.auth-page-ufoundme .ufm-magic-confirm-visual > i { position: absolute; width: 11rem; height: 11rem; border: 1px solid rgba(216,248,251,.22); border-radius: 50%; }
.auth-page-ufoundme .ufm-magic-confirm-visual > i + i { width: 16rem; height: 16rem; }
:root[data-theme='dark'] .auth-page-ufoundme .ufm-magic-confirm-privacy { color: #c4bbcc; }
:root[data-theme='dark'] .auth-page-ufoundme .ufm-magic-confirm-restart { color: #c7aef3; }

/* Dark mode preserves the same grouping rather than inverting the illustration. */
:root[data-theme='dark'] .auth-page-ufoundme .auth-login-shell {
  border-color: rgba(255, 255, 255, .12);
  background: rgba(27, 21, 40, .92);
  box-shadow: 0 2rem 5rem rgba(0, 0, 0, .38);
}

:root[data-theme='dark'] .auth-page-ufoundme .auth-login-shell .auth-card h2,
:root[data-theme='dark'] .auth-page-ufoundme .auth-login-shell label { color: #f6f1fb; }
:root[data-theme='dark'] .auth-page-ufoundme .auth-login-shell .auth-card > p,
:root[data-theme='dark'] .auth-page-ufoundme .auth-login-shell .auth-login-help-ticker,
:root[data-theme='dark'] .auth-page-ufoundme .auth-login-shell .auth-switch { color: #c4bbcc; }
:root[data-theme='dark'] .auth-page-ufoundme .auth-login-shell .auth-login-tabs,
:root[data-theme='dark'] .auth-page-ufoundme .auth-login-shell .auth-email-primary,
:root[data-theme='dark'] .auth-page-ufoundme .auth-login-shell .auth-password-form { border-color: #463b55; background: #241d30; }
:root[data-theme='dark'] .auth-page-ufoundme .auth-login-shell label input { border-color: #50445e; color: #fff; background: #17121f; }
:root[data-theme='dark'] .auth-page-ufoundme .auth-login-shell .auth-login-tab { color: #c4bbcc; }
:root[data-theme='dark'] .auth-page-ufoundme .auth-login-shell .auth-login-tab.is-active { color: #fff; background: #6e53a0; }
:root[data-theme='dark'] .auth-page-ufoundme .auth-login-shell .auth-switch a { color: #c7aef3; }

/* Tablet and phone users reach the task before the supporting story. */
@media (max-width: 60rem) {
  .auth-page-ufoundme .auth-login-shell {
    width: min(36rem, calc(100% - 2rem));
    margin-block: 1.5rem 3rem;
    grid-template-columns: 1fr;
  }
  .auth-page-ufoundme .auth-login-shell > .auth-card { order: 1; min-height: 0; }
  .auth-page-ufoundme .auth-login-shell > .auth-story { order: 2; min-height: 0; }
  .auth-page-ufoundme .auth-login-shell .auth-story h1 { max-width: 28rem; font-size: clamp(2.35rem, 8vw, 3.4rem); }
}

@media (max-width: 44.99rem) {
  .auth-page-ufoundme .auth-login-shell .auth-card { padding: 2rem; }
  .auth-page-ufoundme .auth-login-shell .auth-story { padding: 2rem; }
  .auth-page-ufoundme .auth-login-shell .story-points { display: none; }
  .auth-page-ufoundme .auth-login-shell .ufm-auth-scene { height: 10.5rem; margin-top: 1.35rem; }
}

@media (max-width: 29.99rem) {
  .auth-page-ufoundme .auth-login-shell {
    width: calc(100% - 1rem);
    margin-top: .75rem;
    padding: .35rem;
    border-radius: 1.35rem;
  }
  .auth-page-ufoundme .auth-login-shell .auth-card,
  .auth-page-ufoundme .auth-login-shell .auth-story { padding: 1.35rem; border-radius: 1rem; }
  .auth-page-ufoundme .auth-login-shell .auth-login-tabs { gap: .2rem; }
  .auth-page-ufoundme .auth-login-shell .auth-login-tab { padding-inline: .35rem; font-size: .66rem; }
  .auth-page-ufoundme .auth-login-shell .auth-email-primary,
  .auth-page-ufoundme .auth-login-shell .auth-password-form { padding: .85rem; }
  .auth-page-ufoundme .auth-login-shell .auth-story h1 { font-size: 2.25rem; }
  .auth-page-ufoundme .auth-login-shell .ufm-auth-scene { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .auth-page-ufoundme .auth-login-shell *,
  .auth-page-ufoundme .auth-login-shell *::before,
  .auth-page-ufoundme .auth-login-shell *::after { scroll-behavior: auto; transition: none; animation: none; }
}

/* 2026-10-25 · Mobile-first sign-in: the form first, readable tabs, nothing floating over the form. */
@media (max-width:560px){
  .auth-page .auth-login-tabs-three{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding:4px}
  .auth-page .auth-login-tab{min-height:52px;padding:6px 4px!important;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:.82rem!important;line-height:1.15;white-space:normal!important;text-align:center;overflow:visible;text-overflow:clip}
  .auth-page .auth-login-tab img,.auth-page .auth-login-tab .auth-tab-google,.auth-page .auth-login-tab .auth-tab-password{width:18px;height:18px;flex:none}
  .auth-page input[type="email"],.auth-page input[type="password"],.auth-page input[type="text"]{font-size:16px!important;min-height:50px}
  .auth-page button[type="submit"]{min-height:52px;font-size:1rem}
  .auth-page{padding-bottom:calc(88px + env(safe-area-inset-bottom))}
  .auth-page .auth-scroll-top,.auth-page .ufm-back-to-top{display:none!important}
  .auth-page .ufm-readability-button{transform:scale(.86);transform-origin:left bottom}
}

/* Login scene: phones in the colours of real cards, and the large metal tag next to the silicone one. */
.ufm-auth-phone.ufm-auth-phone-dog{background:linear-gradient(165deg,#ff704d,#ffb03a);color:#fff}
.ufm-auth-phone.ufm-auth-phone-cat{background:linear-gradient(165deg,#4b3575,#8f6bd6);color:#fff}
.ufm-auth-phone.ufm-auth-phone-dog small,.ufm-auth-phone.ufm-auth-phone-dog span,.ufm-auth-phone.ufm-auth-phone-dog strong,.ufm-auth-phone.ufm-auth-phone-cat small,.ufm-auth-phone.ufm-auth-phone-cat span,.ufm-auth-phone.ufm-auth-phone-cat strong{color:#fff}
.ufm-auth-phone.ufm-auth-phone-dog>img,.ufm-auth-phone.ufm-auth-phone-cat>img{border-color:#ffffffcc}
.ufm-auth-phone.ufm-auth-phone-dog b{background:#171327}
.ufm-auth-phone.ufm-auth-phone-cat b{background:#fff;color:#4b3575}
.ufm-auth-badge.ufm-auth-badge-metal{left:9%;right:auto;bottom:1.4rem;transform:rotate(10deg);width:3.9rem}
@media (max-width:760px){.ufm-auth-badge.ufm-auth-badge-metal{width:3.2rem;left:6%}}
.ufm-auth-badge.ufm-auth-badge-metal{left:auto!important;right:5%!important;bottom:1.1rem;transform:rotate(12deg)}
@media (max-width:760px){.ufm-auth-badge.ufm-auth-badge-metal{left:auto!important;right:3%!important}}
.auth-page .auth-login-tabs-three{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important}
.auth-page .auth-login-tab{justify-content:center;white-space:normal!important;text-align:center;line-height:1.15;overflow:visible!important;text-overflow:clip!important}
.auth-page .auth-login-tab,.auth-page .auth-login-tab *{white-space:normal!important;overflow:visible!important;text-overflow:clip!important;max-width:none!important}
.auth-page .auth-login-tab{padding:6px 8px!important;gap:6px!important;font-size:.9rem!important;min-width:0}