/* --- Icons (Remix Icon) ---------------------------------- */
/* Ne SURTOUT PAS forcer content: sur toutes les classes ri-  */
/* Assure-toi d'inclure la font officielle remixicon.css      */

/* --- iOS/WebView: thème clair explicite ------------------- */
html { color-scheme: light; }
body {
  padding-bottom: env(safe-area-inset-bottom);
  padding-top:    env(safe-area-inset-top);
  padding-left:   env(safe-area-inset-left);
  padding-right:  env(safe-area-inset-right);
  background: linear-gradient(135deg, #4f46e5 0%, #7e22ce 50%, #3730a3 100%);
  min-height: 100vh;
  animation: gradientShift 15s ease infinite;
  background-size: 400% 400%;
}
@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

body.hide-content { opacity: 0 !important; }

/* --- Inputs (un seul bloc, compatible iOS) ---------------- */
.input-field {
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: .75rem;
  -webkit-appearance: none;
  appearance: none;
  color: #fff;
  -webkit-text-fill-color: #fff;  /* iOS */
  caret-color: #fff;
  font-size: 16px;                /* empêche le zoom iOS */
  transition: all .4s cubic-bezier(.4,0,.2,1);
}
.input-field::placeholder { color: rgba(255,255,255,0.6); }
.input-field:hover {
  background: rgba(255,255,255,0.10);
}
.input-field:focus {
  outline: none;
  border-color: rgba(255,255,255,0.30);
  box-shadow: 0 0 0 4px rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.12);
}

/* Autofill iOS (masque le fond jaune/bleu et garde le texte blanc) */
input:-webkit-autofill,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: #fff !important;
  caret-color: #fff !important;
  transition: background-color 9999s ease-out 0s;
  box-shadow: 0 0 0px 1000px rgba(255,255,255,0.08) inset !important;
}

/* Neutraliser les styles par défaut iOS */
input, button, select, textarea {
  -webkit-appearance: none;
  appearance: none;
}

/* --- Cards / effets -------------------------------------- */
.glassmorphism {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
}

/* --- Boutons --------------------------------------------- */
.btn-primary {
  background: linear-gradient(45deg, #3a2a59, #cb47ff);
  background-size: 200% 200%;
  animation: gradientAnimation 3s ease infinite;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(58, 42, 89, 0.4);
}
.btn-primary:active { transform: translateY(0); }

@keyframes gradientAnimation {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.ripple { position: relative; overflow: hidden; }
.ripple::before {
  content: '';
  position: absolute; top: 50%; left: 50%;
  width: 0; height: 0; border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%);
  transition: width .6s, height .6s;
}
.ripple:active::before { width: 300px; height: 300px; }

.social-btn {
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.12);
  transition: all .4s cubic-bezier(.4,0,.2,1);
}
.social-btn:hover {
  background: rgba(255,255,255,0.10);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
  border-color: rgba(255,255,255,0.20);
}
.social-btn:active { transform: translateY(0); }

/* Bouton “œil” */
.password-toggle { background: transparent; border: 0; padding: 0; cursor: pointer; }
.password-toggle:hover { color: rgba(255,255,255,0.8); }

/* --- UI divers ------------------------------------------- */
.separator { position: relative; text-align: center; margin: 2rem 0; }
.separator::before {
  content: ''; position: absolute; top: 50%; left: 0; right: 0; height: 1px;
  background: linear-gradient(to right, transparent, rgba(255,255,255,.3), transparent);
}
.separator span {
  background: rgba(255,255,255,0.1);
  padding: 0 1rem;
  color: rgba(255,255,255,0.7);
  font-size: .875rem;
  backdrop-filter: blur(10px);
  border-radius: 20px;
}

.floating-particles { position: fixed; inset: 0; pointer-events: none; z-index: 1; }
.particle { position: absolute; background: rgba(255,255,255,0.1); border-radius: 50%; animation: float 6s ease-in-out infinite; }
@keyframes float { 0%,100%{ transform: translateY(0) rotate(0) } 50%{ transform: translateY(-20px) rotate(180deg) } }

.fade-in { animation: fadeIn .8s ease-out; }
@keyframes fadeIn { from{ opacity:0; transform:translateY(20px) } to{ opacity:1; transform:translateY(0) } }

.slide-up { animation: slideUp .6s ease-out; }
@keyframes slideUp { from{ opacity:0; transform:translateY(30px) } to{ opacity:1; transform:translateY(0) } }

.loading-spinner {
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;
  width: 20px; height: 20px;
  animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.error-message {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #fca5a5;
  padding: .75rem; border-radius: 8px; font-size: .875rem; margin-top: .5rem;
  backdrop-filter: blur(10px);
}