/* Traguer AI — page de connexion split-screen animée (inspiré navos). */

.auth-body { margin: 0; height: 100vh; overflow: hidden; background: #0b1020; }
.auth-split { display: flex; height: 100vh; }

/* ═══════════ Panneau gauche (hero animé) ═══════════ */
.auth-hero {
  position: relative; flex: 1 1 58%; min-width: 0;
  display: flex; flex-direction: column;
  padding: 46px 54px; overflow: hidden; color: #eef2fb;
  background:
    radial-gradient(1000px 700px at 80% 8%, #163b86 0%, transparent 55%),
    radial-gradient(760px 640px at 8% 24%, #4b1d74 0%, transparent 55%),
    radial-gradient(900px 800px at 60% 118%, #10245a 0%, transparent 60%),
    linear-gradient(155deg, #0e1730 0%, #0b1020 60%, #0a0e1c 100%);
}
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-waves { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .55; }
.hero-waves .wv { stroke: #4aa3ff; opacity: .5; animation: wave 9s ease-in-out infinite; }
.hero-waves .wv:nth-child(2) { stroke: #8a6bff; animation-delay: -2s; }
.hero-waves .wv:nth-child(3) { stroke: #35d0a0; animation-delay: -4s; opacity: .4; }
.hero-waves .wv:nth-child(4) { stroke: #ff5ca8; animation-delay: -6s; opacity: .35; }
@keyframes wave {
  0%, 100% { transform: translateY(0) scaleY(1); }
  50%      { transform: translateY(-16px) scaleY(1.04); }
}
.hero-orb { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .5; }
.orb-1 { width: 380px; height: 380px; right: -80px; top: -60px;
  background: radial-gradient(circle, #1f7bff99, transparent 70%); animation: float1 14s ease-in-out infinite; }
.orb-2 { width: 320px; height: 320px; left: -60px; bottom: 40px;
  background: radial-gradient(circle, #ff2a9d66, #7b2dff33 40%, transparent 70%); animation: float2 17s ease-in-out infinite; }
@keyframes float1 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-24px,20px)} }
@keyframes float2 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(20px,-18px)} }

.hero-top, .hero-mid, .hero-foot { position: relative; z-index: 1; }
.hero-logo { height: 34px; }
.hero-mid { margin-top: auto; margin-bottom: auto; max-width: 460px; }

.hero-wordmark {
  font-size: clamp(40px, 6vw, 66px); font-weight: 800; letter-spacing: -.02em;
  line-height: 1; margin-bottom: 16px;
  background: linear-gradient(120deg, #ffffff 0%, #b9d0ff 50%, #7ea6ff 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: rise .7s cubic-bezier(.2,.8,.2,1) both;
}
.hero-tag { font-size: 18px; font-weight: 600; margin: 0 0 6px; animation: rise .7s .08s both; }
.hero-subtag { font-size: 14.5px; color: #aab6d4; margin: 0 0 26px; line-height: 1.5; animation: rise .7s .16s both; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* Tuiles de la suite */
.hero-apps { display: flex; gap: 12px; margin-bottom: 30px; flex-wrap: wrap; }
.app-tile {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  animation: rise .6s both;
}
.app-glyph {
  width: 52px; height: 52px; border-radius: 14px;
  display: grid; place-items: center; font-weight: 800; font-size: 18px; color: #fff;
  background: linear-gradient(145deg, color-mix(in srgb, var(--tile) 78%, white 8%), var(--tile));
  box-shadow: 0 8px 22px color-mix(in srgb, var(--tile) 45%, transparent);
  animation: bob 4s ease-in-out infinite;
}
.app-tile:nth-child(2) .app-glyph { animation-delay: -1s; }
.app-tile:nth-child(3) .app-glyph { animation-delay: -2s; }
.app-tile:nth-child(4) .app-glyph { animation-delay: -3s; font-size: 14px; }
@keyframes bob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
.app-name { font-size: 11.5px; color: #9fabc9; }

/* Bulles de chat IA */
.hero-chat { display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; max-width: 400px; }
.bubble {
  font-size: 13.5px; line-height: 1.45; padding: 11px 15px; border-radius: 16px;
  opacity: 0; animation: pop .5s forwards;
}
.bubble-user {
  align-self: flex-end; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.14);
  border-bottom-right-radius: 5px; animation-delay: .5s;
}
.bubble-ai {
  align-self: flex-start; color: #eaf1ff;
  background: linear-gradient(135deg, #2f6bff, #18a7ff);
  border-bottom-left-radius: 5px; box-shadow: 0 8px 24px rgba(47,107,255,.35);
  animation-delay: 1.3s;
}
.ai-spark { margin-right: 6px; }
@keyframes pop { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }

/* Fonctionnalités qui défilent */
.hero-features { position: relative; height: 26px; }
.hero-features .feat {
  position: absolute; left: 0; top: 0;
  font-size: 14px; color: #c7d3ef; font-weight: 500;
  display: inline-flex; align-items: center; gap: 8px;
  opacity: 0; animation: featCycle 16s linear infinite;
}
.hero-features .feat::before { content: "→"; color: #6f9dff; }
.hero-features .feat[data-i="1"] { animation-delay: 4s; }
.hero-features .feat[data-i="2"] { animation-delay: 8s; }
.hero-features .feat[data-i="3"] { animation-delay: 12s; }
@keyframes featCycle {
  0%   { opacity: 0; transform: translateY(8px); }
  3%   { opacity: 1; transform: translateY(0); }
  22%  { opacity: 1; transform: translateY(0); }
  25%  { opacity: 0; transform: translateY(-8px); }
  100% { opacity: 0; }
}

.hero-foot { margin-top: auto; font-size: 12px; color: #6b7695; }

/* ═══════════ Panneau droit (formulaire) ═══════════ */
.auth-form-wrap {
  flex: 1 1 42%; min-width: 0; background: #f6f8fc;
  display: flex; align-items: center; justify-content: center; padding: 32px;
}
.auth-card2 { width: 100%; max-width: 360px; }
.auth-brand-sm { display: none; margin-bottom: 20px; }
.auth-brand-sm img { height: 34px; }

.auth-h1 { font-size: 24px; font-weight: 700; color: #161c2b; margin: 0 0 4px; letter-spacing: -.01em; }
.auth-p { font-size: 14.5px; color: #6b7488; margin: 0 0 24px; }

.auth-form label { display: block; font-size: 13px; color: #6b7488; margin: 16px 0 6px; }
.auth-form input {
  width: 100%; padding: 12px 14px; border-radius: 11px; border: 1px solid #e4e9f2;
  background: #fff; font-size: 14.5px; outline: none; font-family: inherit;
  transition: border-color .15s, box-shadow .15s;
}
.auth-form input:focus { border-color: #2f6bff; box-shadow: 0 0 0 3px rgba(47,107,255,.14); }
.auth-submit { width: 100%; margin-top: 22px; padding: 13px; font-size: 15px; border-radius: 11px; }

.auth-lang { margin-top: 22px; justify-content: center; }
.auth-legal { margin-top: 18px; text-align: center; font-size: 12px; color: #8a93a6; }
.auth-legal a { color: #8a93a6; }
.auth-legal a:hover { color: #2f6bff; }

/* Inscription : indice mot de passe, acceptation CGU, bascule login/register */
.auth-hint { font-size: 12px; color: #8a93a6; margin-top: 6px; }
.auth-accept {
  display: flex; align-items: flex-start; gap: 9px; margin-top: 18px;
  font-size: 13px; color: #6b7488; line-height: 1.45;
}
.auth-accept input { width: 17px; height: 17px; margin-top: 1px; accent-color: #2f6bff; flex: none; }
.auth-accept a { color: #2f6bff; }
.auth-switch { margin-top: 20px; text-align: center; font-size: 13.5px; color: #6b7488; }
.auth-switch a { color: #2f6bff; font-weight: 600; }

/* ═══════════ Responsive : masquer le hero sous 860px ═══════════ */
@media (max-width: 860px) {
  .auth-hero { display: none; }
  .auth-form-wrap { flex: 1 1 100%; }
  .auth-brand-sm { display: block; }
}

/* ═══════════ Accessibilité : réduire les animations ═══════════ */
@media (prefers-reduced-motion: reduce) {
  .hero-waves .wv, .hero-orb, .app-glyph, .hero-features .feat,
  .hero-wordmark, .hero-tag, .hero-subtag, .app-tile, .bubble {
    animation: none !important; opacity: 1 !important;
  }
  .hero-features .feat:not([data-i="0"]) { display: none; }
}