/* ==========================================================================
   Pages de connexion, inscription, mot de passe et invitation
   Même univers que la page de présentation : nuit étoilée, verre, 3D.
   ========================================================================== */
.auth{
  --ax-bg: #06070C;
  --ax-line: rgba(255, 255, 255, .08);
  --ax-line-2: rgba(255, 255, 255, .14);
  --ax-muted: #9095AA;
  --ax-a1: #6D8BFF; --ax-a2: #A78BFA; --ax-a3: #22D3EE; --ax-a4: #F472B6;
  --ax-grad: linear-gradient(100deg, #8EA6FF 0%, #B79BFF 35%, #F0A6E0 65%, #7DE3F4 100%);
  --ax-ease: cubic-bezier(.22, 1, .36, 1);
  --ax-spring: cubic-bezier(.34, 1.56, .64, 1);
  --accent: #6D8BFF; --accent-hover: #8EA6FF; --accent-soft: rgba(109, 139, 255, .22); --on-accent: #fff;
  --text: #EDEEF5; --text-2: #A3A8BD; --text-3: #6B7088;

  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); min-height: 100dvh;
  background: var(--ax-bg); color: var(--text); overflow-x: clip;
}

/* Fond */
.ax-stars{ position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.ax-aurora{ position: fixed; inset: -20vmax; z-index: 0; pointer-events: none; filter: blur(80px); opacity: .55; }
.ax-aurora i{ position: absolute; border-radius: 50%; mix-blend-mode: screen; }
.ax-aurora i:nth-child(1){ width: 55vmax; height: 55vmax; left: 0; top: 5%; background: radial-gradient(circle, #3046C9, transparent 65%); animation: ax-d1 22s ease-in-out infinite alternate; }
.ax-aurora i:nth-child(2){ width: 45vmax; height: 45vmax; right: 0; top: 20%; background: radial-gradient(circle, #6D28D9, transparent 65%); animation: ax-d2 26s ease-in-out infinite alternate; }
.ax-aurora i:nth-child(3){ width: 40vmax; height: 40vmax; left: 30%; bottom: 0; background: radial-gradient(circle, #0E7490, transparent 65%); opacity: .6; animation: ax-d3 30s ease-in-out infinite alternate; }
@keyframes ax-d1{ to{ transform: translate(16vmax, 12vmax) scale(1.15); } }
@keyframes ax-d2{ to{ transform: translate(-18vmax, 16vmax) scale(.9); } }
@keyframes ax-d3{ to{ transform: translate(-10vmax, -20vmax) scale(1.2); } }
.ax-noise{
  position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .06; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.auth-visual, .auth-main{ position: relative; z-index: 2; }

/* Marque */
.brand-mark{
  width: 30px; height: 30px; border-radius: 9px; color: #fff; display: grid; place-items: center; flex: none;
  background: linear-gradient(135deg, #6D8BFF, #A78BFA 60%, #F0A6E0);
  box-shadow: 0 6px 20px rgba(109, 139, 255, .45), inset 0 1px 0 rgba(255, 255, 255, .4);
}
.brand-mark .i{ width: 17px; height: 17px; stroke-width: 3; }
.auth-brand{ display: inline-flex; align-items: center; gap: 10px; font: 700 17px/1 'Inter Tight', var(--font-title); letter-spacing: -.02em; color: var(--text); text-decoration: none; }
.auth-brand b{ font-weight: 500; color: var(--ax-muted); margin-left: -6px; }

/* ---------- Visuel (PC) ---------- */
.auth-visual{
  display: flex; flex-direction: column; justify-content: space-between; gap: 28px; overflow: hidden;
  padding: 36px 56px; border-right: 1px solid var(--ax-line);
  background: linear-gradient(180deg, rgba(255, 255, 255, .02), transparent 40%);
}
.auth-pitch h2{ font: 800 clamp(2.4rem, 1.2rem + 2.8vw, 4rem)/1 'Inter Tight', var(--font-title); letter-spacing: -.045em; }
.ax-word{ display: inline-block; opacity: 0; transform: translateY(60%) rotate(5deg); transform-origin: 0 100%; animation: ax-up 1s var(--ax-ease) forwards; }
.ax-word:nth-child(2){ animation-delay: .08s; }
.ax-word:nth-child(4){ animation-delay: .18s; }
.ax-word:nth-child(5){ animation-delay: .26s; }
@keyframes ax-up{ to{ opacity: 1; transform: none; } }
.ax-grad{ background: var(--ax-grad); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: ax-up 1s var(--ax-ease) .18s forwards, ax-shift 8s ease-in-out infinite alternate; }
@keyframes ax-shift{ to{ background-position: 100% 0; } }
.ax-serif{ font-family: 'Instrument Serif', Georgia, serif; font-style: italic; font-weight: 400; letter-spacing: -.01em; font-size: 1.06em; }
.auth-pitch p{ margin-top: 18px; color: var(--ax-muted); max-width: 44ch; font-size: 17px; line-height: 1.6; animation: ax-up 1s var(--ax-ease) .35s both; }

/* Scène 3D */
.ax-stage{ position: relative; height: 360px; perspective: 1600px; animation: ax-stage 1.4s var(--ax-ease) .3s both; }
@keyframes ax-stage{ from{ opacity: 0; transform: translateY(50px) scale(.94); } }
.ax-scene{
  position: absolute; inset: 0; transform-style: preserve-3d;
  transform: rotateX(calc(16deg + var(--ry, 0deg))) rotateY(calc(-18deg + var(--rx, 0deg))) rotateZ(2deg);
  transition: transform 1.2s var(--ax-ease);
}
.ax-layer{ position: absolute; transform: translateZ(calc(var(--z) * 1px)); }
.ax-orb{ width: 340px; height: 340px; left: 15%; top: 0; border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgba(167, 139, 250, .6), rgba(64, 86, 220, .3) 45%, transparent 70%); filter: blur(30px); animation: ax-pulse 6s ease-in-out infinite; }
@keyframes ax-pulse{ 50%{ opacity: .6; scale: 1.1; } }
.ax-card{
  left: 40px; top: 50px; width: min(440px, 80%); padding: 16px; border-radius: 18px;
  background: linear-gradient(180deg, rgba(24, 27, 44, .95), rgba(14, 16, 27, .95)); border: 1px solid var(--ax-line-2);
  box-shadow: 0 50px 100px -20px rgba(0, 0, 0, .8), 0 0 80px -10px rgba(109, 139, 255, .35), inset 0 1px 0 rgba(255, 255, 255, .08);
}
.ax-card-head{ display: flex; justify-content: space-between; align-items: center; padding: 4px 6px 12px; }
.ax-card-head b{ display: block; font: 700 19px 'Inter Tight', var(--font-title); letter-spacing: -.02em; }
.ax-card-head small{ color: var(--text-3); font-size: 12px; }
.ax-ring{ position: relative; width: 42px; height: 42px; }
.ax-ring svg{ width: 100%; height: 100%; transform: rotate(-90deg); }
.ax-ring circle{ fill: none; stroke: rgba(255, 255, 255, .08); stroke-width: 3.5; }
.ax-ring .v{ stroke: url(#axg); stroke-linecap: round; stroke-dasharray: 94.25; stroke-dashoffset: calc(94.25 - 94.25 * var(--pct, .25)); transition: stroke-dashoffset .8s var(--ax-ease); }
.ax-ring span{ position: absolute; inset: 0; display: grid; place-items: center; font-size: 10px; font-weight: 600; }
.ax-tasks{ list-style: none; margin: 0; padding: 0; }
.ax-tasks li{ display: flex; align-items: center; gap: 10px; padding: 11px 8px; border-top: 1px solid var(--ax-line); font-size: 13.5px; font-weight: 500; transition: opacity .5s, background .3s; border-radius: 8px; }
.ax-tasks li.flash{ background: rgba(109, 139, 255, .1); }
.ax-tasks .t{ flex: 1; min-width: 0; position: relative; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .4s; }
.ax-tasks .t::after{ content: ''; position: absolute; left: 0; top: 52%; height: 1.5px; width: 100%; background: var(--text-3); transform: scaleX(0); transform-origin: 0 50%; transition: transform .5s var(--ax-ease); }
.ax-tasks em{ font-style: normal; font-size: 11px; color: var(--text-3); margin-left: 4px; }
.ax-tasks li.done{ opacity: .55; }
.ax-tasks li.done .t{ color: var(--text-3); }
.ax-tasks li.done .t::after{ transform: scaleX(1); }
.ax-tasks .cb{ position: relative; width: 18px; height: 18px; border-radius: 50%; flex: none; border: 1.6px solid rgba(255, 255, 255, .28); transition: background .35s, border-color .3s; }
.ax-tasks .cb::after{ content: ''; position: absolute; left: 5px; top: 2px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); transition: transform .35s var(--ax-spring) .05s; }
.ax-tasks li.done .cb{ background: linear-gradient(135deg, var(--ax-a1), var(--ax-a2)); border-color: transparent; animation: ax-pop .45s var(--ax-spring); }
.ax-tasks li.done .cb::after{ transform: rotate(45deg) scale(1); }
@keyframes ax-pop{ 50%{ transform: scale(1.35); } }
.ax-tasks .chip{ font-size: 10.5px; padding: 2px 8px; border-radius: 999px; color: var(--c); background: color-mix(in srgb, var(--c) 16%, transparent); }
.ax-tasks .flag{ color: #F87171; display: inline-flex; }
.ax-tasks .flag .i{ width: 14px; height: 14px; }
.ax-tasks .time{ display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--ax-a3); }
.ax-tasks .time .i{ width: 12px; height: 12px; }

.ax-float{
  display: flex; align-items: center; gap: 12px; padding: 11px 15px 11px 11px; border-radius: 16px; white-space: nowrap; font-size: 13px;
  background: rgba(24, 27, 44, .75); border: 1px solid var(--ax-line-2);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 30px 60px -15px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .1);
}
.ax-float b{ display: block; font-weight: 600; }
.ax-float small{ color: var(--ax-muted); font-size: 12px; }
.ax-float.f1{ right: 0; top: 0; animation: ax-bob 6s ease-in-out infinite; }
.ax-float.f2{ left: 0; bottom: 6px; animation: ax-bob 7s ease-in-out infinite -2s; }
.ax-float.f3{ right: 20px; bottom: 0; animation: ax-bob 8s ease-in-out infinite -4s; }
@keyframes ax-bob{ 50%{ translate: 0 -14px; } }
.ax-ico{ display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; flex: none; color: #fff; }
.ax-ico .i{ width: 18px; height: 18px; }
.ax-ico.bell{ background: linear-gradient(135deg, #F59E0B, #F472B6); box-shadow: 0 6px 20px rgba(244, 114, 182, .4); }
.ax-ico.bell .i{ animation: ax-ring 3s ease-in-out infinite; transform-origin: 50% 10%; }
@keyframes ax-ring{ 0%, 70%, 100%{ rotate: 0deg; } 74%{ rotate: 18deg; } 80%{ rotate: -16deg; } 86%{ rotate: 10deg; } 92%{ rotate: -6deg; } }
.ax-ico.zap{ background: linear-gradient(135deg, #22D3EE, #6D8BFF); box-shadow: 0 6px 20px rgba(34, 211, 238, .4); }
.ax-avs{ display: flex; }
.ax-avs span{ display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font-size: 12px; font-weight: 600; color: #fff; background: var(--c); border: 2px solid #181b2c; }
.ax-avs span + span{ margin-left: -9px; }

.auth-perks{ display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0; padding: 0; list-style: none; font-size: 13.5px; color: var(--text-3); }
.auth-perks li{ display: inline-flex; align-items: center; gap: 7px; }
.auth-perks .i{ color: var(--ax-a1); }

/* ---------- Formulaire ---------- */
.auth-main{ display: flex; flex-direction: column; align-items: center; padding: 28px 24px; gap: 28px; }
.auth-top{ width: min(440px, 100%); display: flex; justify-content: flex-end; align-items: center; }
.auth-brand-mobile{ display: none; }
.auth-back{ display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; font-size: 13.5px; color: var(--ax-muted); text-decoration: none; border: 1px solid var(--ax-line); background: rgba(255, 255, 255, .03); transition: color .2s, background .2s, border-color .2s; }
.auth-back:hover{ color: var(--text); background: rgba(255, 255, 255, .06); border-color: var(--ax-line-2); }
.auth-back .i{ width: 15px; height: 15px; transition: transform .3s var(--ax-spring); }
.auth-back:hover .i{ transform: translateX(-3px); }

.auth-panel{
  position: relative; margin: auto 0; width: min(440px, 100%); padding: 40px 36px; border-radius: 28px; isolation: isolate;
  background: linear-gradient(180deg, rgba(22, 25, 42, .72), rgba(12, 14, 24, .72));
  border: 1px solid var(--ax-line-2);
  backdrop-filter: blur(22px) saturate(1.4); -webkit-backdrop-filter: blur(22px) saturate(1.4);
  box-shadow: 0 50px 120px -30px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .02), inset 0 1px 0 rgba(255, 255, 255, .08);
  animation: ax-panel 1s var(--ax-ease) .1s both;
}
@keyframes ax-panel{ from{ opacity: 0; transform: translateY(30px) scale(.97); filter: blur(8px); } }
/* Bordure lumineuse qui suit la souris */
.auth-panel::before{
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; z-index: -1;
  background: radial-gradient(300px circle at var(--gx, 50%) var(--gy, 0%), rgba(183, 155, 255, .9), transparent 55%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
.auth-panel-glow{ position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1; background: radial-gradient(500px circle at var(--gx, 50%) var(--gy, 0%), rgba(109, 139, 255, .12), transparent 45%); }

.auth-panel h1{ font: 800 32px/1.1 'Inter Tight', var(--font-title); letter-spacing: -.04em; }
.auth-panel .lead{ color: var(--ax-muted); margin-top: 8px; }
.auth-form{ display: grid; gap: 18px; margin-top: 30px; }
.auth-form > *{ animation: ax-up .8s var(--ax-ease) both; }
.auth-form > :nth-child(2){ animation-delay: .25s; } .auth-form > :nth-child(3){ animation-delay: .32s; }
.auth-form > :nth-child(4){ animation-delay: .39s; } .auth-form > :nth-child(5){ animation-delay: .46s; }
.auth-form > :nth-child(6){ animation-delay: .53s; } .auth-form > :nth-child(7){ animation-delay: .6s; }

.auth .field > label, .auth .label-row label{ color: #C9CDE0; font-size: 13.5px; }
.auth .input{
  min-height: 50px; border-radius: 14px; color: var(--text);
  background: rgba(0, 0, 0, .28); border: 1px solid var(--ax-line-2);
  transition: border-color .25s, box-shadow .3s, background .25s;
}
.auth .input:hover{ border-color: rgba(255, 255, 255, .24); }
.auth .input:focus{ background: rgba(0, 0, 0, .38); border-color: rgba(142, 166, 255, .8); box-shadow: 0 0 0 4px rgba(109, 139, 255, .18), 0 0 30px -6px rgba(109, 139, 255, .6); }
.auth .input:-webkit-autofill{ -webkit-text-fill-color: var(--text); -webkit-box-shadow: 0 0 0 100px #11142A inset; caret-color: var(--text); }
.auth .input-group > .i:first-child{ transition: color .25s; }
.auth .input-group:focus-within > .i:first-child{ color: var(--ax-a1); }
.auth .input-group .input-action:hover{ background: rgba(255, 255, 255, .06); }
.auth .hint{ color: var(--ax-muted); }
.auth .label-row a.hint:hover{ color: var(--text); }
.auth .checkbox input{ background: rgba(0, 0, 0, .3); border-color: var(--ax-line-2); }
.auth .checkbox input:checked{ background: linear-gradient(135deg, var(--ax-a1), var(--ax-a2)); border-color: transparent; }
.auth .alert{ background: color-mix(in srgb, var(--c) 10%, rgba(0, 0, 0, .3)); border-color: color-mix(in srgb, var(--c) 35%, transparent); }

/* Bouton principal : dégradé, reflet, halo */
.auth .btn-primary{
  position: relative; overflow: hidden; isolation: isolate; min-height: 52px; margin-top: 6px; border: 0; border-radius: 14px;
  font-weight: 600; color: #fff; background: linear-gradient(100deg, #5B7CFA, #8B6CF6 55%, #C46FD8); background-size: 200% 100%;
  box-shadow: 0 14px 40px -10px rgba(124, 108, 246, .8), inset 0 1px 0 rgba(255, 255, 255, .3);
  transition: background-position .6s var(--ax-ease), box-shadow .4s, transform .2s;
}
.auth .btn-primary::after{
  content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; z-index: -1;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent); transform: skewX(-20deg);
  animation: ax-shine 4.5s ease-in-out infinite 1.5s;
}
@keyframes ax-shine{ 0%, 70%{ left: -60%; } 100%{ left: 130%; } }
.auth .btn-primary:hover{ background-position: 100% 0; box-shadow: 0 18px 50px -8px rgba(196, 111, 216, .8), inset 0 1px 0 rgba(255, 255, 255, .3); }
.auth .btn-primary:active{ transform: scale(.98); }
.auth .btn-secondary{ background: rgba(255, 255, 255, .04); border-color: var(--ax-line-2); color: var(--text); }
.auth .btn-secondary:hover{ background: rgba(255, 255, 255, .08); }

.auth-switch{ margin-top: 26px; text-align: center; font-size: 14px; color: var(--ax-muted); }
.auth-switch a, .auth-panel .lead a{ color: #B9C4FF; font-weight: 500; }
.auth-switch a:hover{ color: #fff; }
.auth-panel .alert{ margin-top: 20px; }
.auth-foot{ font-size: 12.5px; color: var(--text-3); }

/* Robustesse du mot de passe : barres lumineuses */
.auth .strength i{ background: rgba(255, 255, 255, .08); transition: background .35s, box-shadow .35s; }
.auth .strength[data-score="1"] i:nth-child(-n+1){ background: #F87171; box-shadow: 0 0 10px #F87171; }
.auth .strength[data-score="2"] i:nth-child(-n+2){ background: #FBBF24; box-shadow: 0 0 10px #FBBF24; }
.auth .strength[data-score="3"] i:nth-child(-n+3){ background: #6D8BFF; box-shadow: 0 0 10px #6D8BFF; }
.auth .strength[data-score="4"] i{ background: #34D399; box-shadow: 0 0 10px #34D399; }

/* Page d'invitation */
.invite-badge{ width: 60px; height: 60px; border-radius: 18px; display: grid; place-items: center; color: var(--c); background: color-mix(in srgb, var(--c) 15%, transparent); margin-bottom: 18px; box-shadow: 0 0 40px -6px var(--c); }
.invite-badge .i{ width: 28px; height: 28px; }
.auth-form .btn .i{ width: 18px; height: 18px; }

@media (max-width: 1100px){
  .auth-visual{ padding: 32px 36px; }
  .ax-float.f3{ display: none; }
}
@media (max-width: 960px){
  .auth{ grid-template-columns: 1fr; }
  .auth-visual{ display: none; }
  .auth-main{ padding: 18px 16px 24px; gap: 22px; }
  .auth-top{ justify-content: space-between; }
  .auth-brand-mobile{ display: inline-flex; }
  .auth-back{ font-size: 0; padding: 9px; }
  .auth-back .i{ width: 17px; height: 17px; }
  .auth-panel{ margin: 0; padding: 30px 22px; border-radius: 24px; }
  .auth-panel h1{ font-size: 28px; }
}
@media (prefers-reduced-motion: reduce){
  .auth *, .auth *::before, .auth *::after{ animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .ax-word{ opacity: 1; transform: none; }
}

/* Page « Vérifiez vos e-mails » */
.auth-panel .lead strong{ color: var(--text); font-weight: 600; overflow-wrap: anywhere; }
.verify-change{ margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--ax-line); }
.verify-change summary{ cursor: pointer; font-size: 14px; color: #B9C4FF; list-style: none; text-align: center; }
.verify-change summary::-webkit-details-marker{ display: none; }
.verify-change summary:hover{ color: #fff; }
.verify-change .auth-form{ margin-top: 16px; }
.auth .btn-ghost{ color: var(--ax-muted); }
.auth .btn-ghost:hover{ color: var(--text); background: rgba(255, 255, 255, .05); }
.hp-field{ position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }