:root{
  /* Auth theme tokens (mapped to global theme-2025) */
  --auth-bg: var(--app-bg);
  --auth-bg-image: none;
  --auth-bg-size: auto;
  --auth-bg-anim: none;
  --auth-text: var(--app-text);
  --auth-muted: var(--app-muted);
  --auth-surface: var(--app-surface-weak);
  --auth-surface-weak: var(--app-surface-weak);
  --auth-border: var(--app-border);
  --auth-separator: var(--app-border-strong);
  --auth-primary: var(--app-primary);
  --auth-primary-strong: var(--app-primary-strong);
  --auth-accent: var(--app-accent-cyan);
  --auth-danger: var(--app-danger);
  --auth-input-bg: var(--app-surface-strong);
  --auth-input-border: var(--app-border);
  --auth-input-text: var(--app-text);
  --auth-input-placeholder: var(--app-muted);
  --auth-shadow: var(--app-shadow);
  --auth-shadow-hover: var(--app-shadow-strong);
  --auth-focus-ring: color-mix(in oklab, var(--auth-primary) 35%, transparent);

  --ml-primary: var(--auth-primary);
  --ml-primary-700: var(--auth-primary-strong);
  --ml-accent: var(--auth-accent);
  --ml-danger: var(--auth-danger);
  --ml-text: var(--auth-text);
  --ml-text-muted: var(--auth-muted);
  --ml-surface: var(--auth-surface);
  --ml-surface-weak: var(--auth-surface-weak);
  --ml-border: var(--auth-border);

  --color-primary: var(--ml-primary);
  --color-border: var(--ml-border);
  --color-separator: var(--auth-separator);
  --color-text: var(--ml-text);

  --radius-12: 12px;
  --radius-18: 18px;
  --shadow-card: var(--auth-shadow);
  --shadow-card-hover: var(--auth-shadow-hover);
}

/* Fond : gradient animé (desktop) */
html, body{
  height:100%; margin:0;
  font-family:var(--font-primary, system-ui);
  color:var(--auth-text);
  background-color:var(--auth-bg);
  background-image:var(--auth-bg-image);
  background-size:var(--auth-bg-size);
  background-repeat:no-repeat;
  animation:var(--auth-bg-anim);
  box-sizing:border-box;
}
@media (prefers-reduced-motion: reduce){
  html, body{ animation:none; }
}
@keyframes bg-pan{
  from{ background-position:0% 20%; }
  to{ background-position:100% 80%; }
}
*{ box-sizing:inherit; }

.container{
  display:flex; min-height:100vh; align-items:stretch;
}

/* Panneau gauche */
.left-panel{
  flex:1; padding:40px;
  display:flex;               /* centrer verticalement le contenu */
  flex-direction:column;
  justify-content:center;
  background:var(--ml-surface-weak);
  backdrop-filter:blur(8px);
  border-radius:var(--radius-18);
  box-shadow:var(--shadow-card);
  margin:10px;
  position:relative;
  overflow:hidden;
}
.branding{ text-align:center; margin-bottom:26px; }
.branding h1{ margin:8px 0 0; font-size:2rem; }
.branding .brand-logo{
  display:block;
  width:260px; /* taille de test; responsive avec max-width */
  max-width:80%;
  height:auto;
  margin:0 auto 8px;
}
.branding p{ margin:6px 0 0; font-weight:600; color:var(--ml-text-muted); }
.app-logo{ width:72px; height:72px; border-radius:20px; object-fit:cover; }

.intro-content{
  background:var(--ml-surface-weak);
  backdrop-filter:blur(4px);
  border-radius:var(--radius-12);
  padding:20px; text-align:center;
  box-shadow:0 6px 18px rgba(0,0,0,.10);
}
.intro-image{
  max-width:320px; width:100%; height:auto; display:block; margin:0 auto 10px;
  border-radius:12px; /* arrondir légèrement l’image */
}
.intro-content h2{ margin:8px 0 8px; font-size:1.25rem; }
.intro-content p{ margin:0; line-height:1.6; color:var(--ml-text-muted); }

/* Symboles flottants */
.floating-symbols{ position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.floating-symbols .fs{
  position:absolute; left:var(--left,50%); bottom:-12%;
  animation:sway var(--sway,6s) ease-in-out var(--delay,0s) infinite alternate;
  will-change:transform;
}
.floating-symbols .fs span{
  display:block; user-select:none; font-weight:700;
  color:color-mix(in oklab, var(--auth-primary-strong) 70%, transparent); opacity:.18;
  animation:rise var(--rise,16s) linear var(--delay,0s) infinite;
  will-change:transform,opacity;
}
@keyframes rise{
  0%{ transform:translateY(0); opacity:.0; }
  10%{ opacity:.18; }
  100%{ transform:translateY(-120vh); opacity:0; }
}
@keyframes sway{
  0%{ transform:translateX(calc(var(--xamp,20px) * -1)); }
  50%{ transform:translateX(calc(var(--xamp,20px) * 1)); }
  100%{ transform:translateX(calc(var(--xamp,20px) * -1)); }
}
@media (prefers-reduced-motion: reduce){
  .floating-symbols .fs,
  .floating-symbols .fs span{ animation:none!important; display:none; }
}

/* Panneau droit */
.right-panel{
  flex:1; display:flex; justify-content:center; align-items:center;
  padding:40px; margin:10px;
}
.form-container{
  width:100%; max-width:440px;
  background:var(--ml-surface);
  backdrop-filter:blur(6px);
  padding:26px 26px 18px;
  border-radius:var(--radius-12);
  box-shadow:var(--shadow-card);
}

/* --- HEADER : titre centré malgré l’icône à droite --- */
.form-header{
  position:relative; /* permet d’absolutiser l’icône */
  display:block;
  margin-bottom:12px;
}
.form-header h2{
  margin:0;
  text-align:center; /* centre réellement le texte dans le conteneur */
  font-size:1.6rem;
}
.ml-mascot-img{
  width:56px; height:56px; border-radius:999px;
  background:radial-gradient(45% 45% at 50% 40%, color-mix(in oklab, var(--auth-primary) 25%, transparent), transparent 70%);
  filter:drop-shadow(0 6px 12px rgba(0,0,0,.18));
  position:absolute; right:0; top:50%; transform:translateY(-50%); /* icon alignée à droite sans décaler le titre */
}

/* Connexions sociales + séparateurs */
.social-login{ display:flex; flex-direction:column; gap:10px; margin-bottom:18px; }
.social-btn{
  background:var(--auth-input-bg); border:1px solid var(--auth-input-border); border-radius:10px;
  color:var(--auth-input-text);
  padding:10px; font-size:1rem; display:flex; align-items:center; gap:8px; cursor:pointer;
  transition:box-shadow .2s ease, transform .05s ease;
}
.social-btn:hover{ box-shadow:var(--shadow-card-hover); }
.social-btn:active{ transform:scale(.98); }
.social-icon{ width:22px; height:22px; object-fit:contain; }

.or-separator{ position:relative; text-align:center; color:var(--color-separator); margin:18px 0; }
.or-separator span{
  background:var(--ml-surface);
  padding:2px 10px;
  position:relative; z-index:1;
  border-radius:999px;
  font-weight:700;
}
.or-separator::before{
  content:""; position:absolute; inset:0; height:1px; top:50%; background:var(--ml-border);
  opacity:.6;
}

/* --- Mobile --- */
@media (width <= 768px){
  /* Fond mobile : une seule couleur, pas de banding, pas d’anim */
  html, body{
    background:var(--auth-bg);
    background-image:none;
    animation:none;
  }

  .container{ flex-direction:column-reverse; }
  .right-panel, .left-panel{ margin:0; border-radius:0; box-shadow:none; }
  .left-panel{ justify-content:flex-start; } /* sur mobile: aligner en haut pour préserver la lisibilité */
  .intro-content{ margin:14px 0; }
}