:root{
  /* --- Palette Mathos Locos --- */
  --ml-primary:#2D9CDB;
  --ml-primary-700:#1B6FA3;
  --ml-accent:#F2C94C;
  --ml-danger:#FF4D6D;

  --ml-text:#0F172A;
  --ml-text-muted:#475569;
  --ml-surface:rgba(255,255,255,.72);
  --ml-surface-weak:rgba(255,255,255,.45);
  --ml-border:#E4E8EE;

  --color-primary:var(--ml-primary);
  --color-border:var(--ml-border);
  --color-separator:#9AA3B2;
  --color-text:var(--ml-text);

  --radius-12:12px;
  --radius-18:18px;
  --shadow-card:0 12px 30px rgba(17,24,39,.10);
  --shadow-card-hover:0 16px 40px rgba(17,24,39,.16);
}

/* Fond : gradient animé (desktop) */
html, body{
  height:100%; margin:0;
  font-family:"Poppins",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--ml-text);
  background:
    radial-gradient(1200px 800px at 10% 10%, rgba(255,255,255,.25), transparent 60%),
    radial-gradient(1000px 700px at 90% 90%, rgba(255,255,255,.18), transparent 55%),
    linear-gradient(135deg, #B7C7FF, #C9B6FF, #E4C9FF);
  background-size:120% 120%;
  animation:bg-pan 18s ease-in-out infinite alternate;
  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:#1B6FA3; 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%, rgba(45,156,219,.22), 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:#fff; border:1px solid var(--ml-border); border-radius:10px;
  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:#B7C7FF;
    animation:none;
  }

  .container{ flex-direction:column; }
  .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; }
}