/* ===== Variables — cohérentes avec home.php ===== */
:root{
  --primary:#00b494;
  --primary-light:#00d4aa;
  --primary-dark:#009b7e;
  --accen.card input{
  width:100%;
  padding:16px 20px;
  border:2px solid var(--border);
  border-radius:var(--radius-md);
  background:var(--bg-light);
  font-family:inherit;
  font-size:15px;
  color:var(--text);
  transition:all 0.2s ease;
  outline:none;
  position:relative; /* ← AJOUT pour z-index */
  z-index:3; /* ← AJOUT : au-dessus des éléments ::before */
} --text:#1A1A1A;
  --text-light:#6B7280;
  --text-muted:#9CA3AF;
  --bg:#FFFFFF;
  --bg-light:#FAFBFC; 
  --bg-subtle:#F8FAFC;
  --border:#E5E7EB;
  --border-light:#F3F4F6;
  --shadow-sm:0 1px 2px 0 rgba(0,0,0,0.05);
  --shadow-md:0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
  --shadow-lg:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
  --shadow-xl:0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
  --radius-md:8px;
  --radius-lg:12px;
  --radius-xl:16px;
}
@media(prefers-color-scheme:dark){
  :root{
    --text:#F9FAFB;--text-light:#D1D5DB;--text-muted:#9CA3AF;
    --bg:#111827;--bg-light:#1F2937;--bg-subtle:#374151;
    --border:#374151;--border-light:#4B5563;
  }
}

/* ===== Reset & base ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:"Inter",sans-serif;color:var(--text);background:var(--bg);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  line-height:1.6;font-feature-settings:"kern" 1,"liga" 1,"calt" 1;
}
a{color:var(--primary);text-decoration:none;transition:color 0.2s ease}
a:hover{color:var(--primary-dark)}

/* ===== Wrapper avec gradient moderne ===== */
.auth-wrapper{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:100vh;width:100%;padding:40px 20px;
  background:linear-gradient(135deg,#FFFFFF 0%,#F8FAFC 50%,#EEF2FF 100%);
  position:relative;overflow:hidden;
}

/* Effet de fond subtil */
.auth-wrapper::before{
  content:'';position:absolute;top:0;left:0;right:0;bottom:0;
  background:radial-gradient(circle at 30% 20%, rgba(0,180,148,0.08) 0%, transparent 50%),
             radial-gradient(circle at 70% 80%, rgba(0,224,176,0.06) 0%, transparent 50%);
  pointer-events:none;
}

@media(prefers-color-scheme:dark){
  .auth-wrapper{
    background:linear-gradient(135deg,#111827 0%,#1F2937 50%,#374151 100%);
  }
  .auth-wrapper::before{
    background:radial-gradient(circle at 30% 20%, rgba(0,180,148,0.15) 0%, transparent 50%),
               radial-gradient(circle at 70% 80%, rgba(0,224,176,0.10) 0%, transparent 50%);
  }
}

/* ===== Mobile responsive ===== */
@media(max-width:600px){
  .auth-wrapper{justify-content:flex-start;padding:32px 16px}
  .auth-logo{margin-bottom:24px}
  .card{max-width:100%;padding:40px 28px}
}
  
/* ===== Logo avec effet hover ===== */
.auth-logo{text-align:center;margin-bottom:40px;position:relative;z-index:2}
.auth-logo img{
  height:56px;width:auto;display:inline-block;
  transition:transform 0.3s ease, filter 0.3s ease;
}
.auth-logo:hover img{
  transform:scale(1.05);
  filter:drop-shadow(0 4px 8px rgba(0,180,148,0.2));
}

/* ===== Carte moderne ===== */
.card{
  background:var(--bg);
  border:1px solid var(--border-light);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-xl);
  padding:48px 40px;
  width:100%;
  max-width:480px;
  display:flex;
  flex-direction:column;
  gap:24px;
  position:relative;
  z-index:2;
  animation:cardSlide 0.6s cubic-bezier(0.4,0,0.2,1);
  backdrop-filter:blur(10px);
}

/* S'assurer que tous les éléments enfants sont interactifs */
.card > *{
  position:relative;
  z-index:3;
}

@keyframes cardSlide{
  from{
    transform:translateY(30px) scale(0.95);
    opacity:0;
  }
  to{
    transform:translateY(0) scale(1);
    opacity:1;
  }
}

/* Effet de bordure subtile au hover */
.card::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;bottom:0;
  border-radius:var(--radius-xl);
  padding:1px;
  background:linear-gradient(135deg, var(--primary), var(--accent));
  mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite:xor;
  opacity:0;
  transition:opacity 0.3s ease;
  pointer-events:none; /* ← CORRECTION : permet les clics à travers */
}

.card:hover::before{
  opacity:0; /* ← SUPPRESSION complète de l'effet vert au hover */
}

/* ===== Typography ===== */
.card h1{
  font-size:1.875rem;
  font-weight:800;
  text-align:center;
  color:var(--text);
  letter-spacing:-0.02em;
  line-height:1.2;
  margin-bottom:8px;
  position:relative; /* ← AJOUT */
  z-index:3; /* ← AJOUT : au-dessus des éléments ::before */
}

/* ===== Inputs modernes ===== */
.card input{
  width:100%;
  padding:16px 20px;
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  background:var(--bg-light);
  font-family:inherit;
  font-size:15px;
  color:var(--text);
  transition:all 0.2s ease;
  outline:none;
}

.card input:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(0,180,148,0.1);
  background:var(--bg);
}

.card input::placeholder{
  color:var(--text-muted);
}

/* ===== Groupe téléphone avec indicatif ===== */
.phone-input-group{
  display:flex;
  gap:8px;
  margin-bottom:16px;
}

.country-select{
  min-width:120px;
  padding:16px 12px;
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  background:var(--bg-light);
  font-family:inherit;
  font-size:15px;
  color:var(--text);
  transition:all 0.2s ease;
  outline:none;
  cursor:pointer;
}

.country-select:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(0,180,148,0.1);
  background:var(--bg);
}

.phone-number{
  flex:1;
  margin-bottom:0 !important;
}

.phone-hint{
  display:block;
  margin-top:-12px;
  margin-bottom:16px;
  color:var(--text-muted);
  font-size:13px;
}

@media(max-width:480px){
  .phone-input-group{
    flex-direction:column;
    gap:12px;
  }
  
  .country-select{
    min-width:auto;
  }
  
  .phone-hint{
    margin-top:-8px;
  }
}

/* ===== Button moderne ===== */
.card button{
  background:linear-gradient(135deg,var(--primary) 0%,var(--primary-light) 100%);
  color:#fff;
  padding:16px 32px;
  border:none;
  border-radius:var(--radius-md);
  font-weight:700;
  font-size:15px;
  cursor:pointer;
  transition:all 0.3s ease;
  box-shadow:var(--shadow-md);
  position:relative;
  overflow:hidden;
  z-index:3; /* ← AJOUT : au-dessus des autres éléments */
}

.card button::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;bottom:0;
  background:linear-gradient(135deg,var(--primary-dark) 0%,var(--primary) 100%);
  opacity:0;
  transition:opacity 0.3s ease;
  pointer-events:none; /* ← CORRECTION : permet les clics sur le bouton */
  z-index:1; /* ← AJOUT : sous le texte du bouton */
}

.card button:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-lg);
}

.card button:hover::before{
  opacity:1;
}

.card button span{
  position:relative;
  z-index:1;
}

/* ========== INVITATION INFO ============================= */
.invite-info {
  background: linear-gradient(135deg, rgba(0, 180, 148, 0.1) 0%, rgba(0, 224, 176, 0.05) 100%);
  border: 2px solid var(--primary-light);
  border-radius: var(--radius-lg);
  padding: 20px;
  margin-bottom: 24px;
  text-align: center;
}

.invite-info p {
  margin: 0 0 12px;
  font-weight: 600;
  color: var(--primary);
}

.invite-message {
  background: rgba(255, 255, 255, 0.8);
  border-radius: var(--radius-md);
  padding: 16px;
  margin-top: 12px;
  text-align: left;
  border-left: 4px solid var(--primary);
}

.invite-message strong {
  color: var(--primary);
}

/* Champ email en lecture seule pour invitation */
input[readonly] {
  background: var(--bg-light) !important;
  color: var(--text-light) !important;
  cursor: not-allowed;
}

/* ========== FLASH MESSAGES ============================= */
.flash{
  font-size:15px;
  text-align:center;
  padding:12px 16px;
  border-radius:var(--radius-md);
  font-weight:500;
}

.flash.error{
  color:#DC2626;
  background:rgba(220,38,38,0.1);
  border:1px solid rgba(220,38,38,0.2);
}

.flash.success{
  color:var(--primary);
  background:rgba(0,180,148,0.1);
  border:1px solid rgba(0,180,148,0.2);
}

/* ===== Links ===== */
.small{
  text-align:center;
  font-size:14px;
  color:var(--text-light);
  font-weight:500;
}

.small a{
  color:var(--primary);
  font-weight:600;
  text-decoration:none;
  transition:all 0.2s ease;
}

.small a:hover{
  color:var(--primary-dark);
  text-decoration:underline;
}

/* ===== Status indicators modernes ===== */
#emailStatus, #pwdStrength{
  font-size:13px;
  margin-top:-8px;
  font-weight:500;
  padding:8px 12px;
  border-radius:var(--radius-md);
  transition:all 0.2s ease;
  text-align:center;
}

#emailStatus:not(:empty), #pwdStrength:not(:empty){
  background:var(--bg-subtle);
  border:1px solid var(--border-light);
}

/* États des indicateurs */
#emailStatus.available{
  color:var(--primary);
  background:rgba(0,180,148,0.1);
  border-color:rgba(0,180,148,0.2);
}

#emailStatus.unavailable{
  color:#DC2626;
  background:rgba(220,38,38,0.1);
  border-color:rgba(220,38,38,0.2);
}

#pwdStrength.weak{
  color:#DC2626;
  background:rgba(220,38,38,0.1);
  border-color:rgba(220,38,38,0.2);
}

#pwdStrength.strong{
  color:var(--primary);
  background:rgba(0,180,148,0.1);
  border-color:rgba(0,180,148,0.2);
}

/* ===== Honey-captcha (anti-bot) ===== */
.honey{
  position:absolute;
  left:-5000px;
  opacity:0;
  height:0;
  width:0;
  pointer-events:none;
}

/* ===== Responsive improvements ===== */
@media(max-width:480px){
  .card{
    padding:32px 24px;
    gap:20px;
  }
  
  .card h1{
    font-size:1.625rem;
  }
  
  .card input, .card button{
    padding:14px 18px;
  }
}

/* ===== Focus styles pour accessibilité ===== */
.card input:focus-visible{
  outline:2px solid var(--primary);
  outline-offset:2px;
}

.card button:focus-visible{
  outline:2px solid var(--primary);
  outline-offset:2px;
}

.auth-logo a:focus-visible{
  outline:2px solid var(--primary);
  outline-offset:4px;
  border-radius:4px;
}

/* ===== Animation pour les messages de statut ===== */
#emailStatus, #pwdStrength{
  opacity:0;
  transform:translateY(-10px);
  transition:all 0.3s cubic-bezier(0.4,0,0.2,1);
}

#emailStatus:not(:empty), #pwdStrength:not(:empty){
  opacity:1;
  transform:translateY(0);
}