/* ============================================================
   Cloudy Visual Polish — Mobile-first, charge APRES tailwind
   Couvre: index, compte, finaliser, chat, connexion,
            inscription, recuperation, reset-password, activation
   ============================================================ */
:root{
  --c-bg:#040914;
  --c-ink:#e6edf7;
  --c-muted:#8b9bb4;
  --c-blue:#3b82f6;
  --c-violet:#8b5cf6;
  --c-cyan:#06b6d4;
  --c-mint:#10b981;
  --c-grad:linear-gradient(135deg,#3b82f6 0%,#6366f1 45%,#8b5cf6 100%);
  --c-card:rgba(13,20,40,.55);
  --c-border:rgba(148,184,255,.10);
  --c-border-hi:rgba(148,184,255,.22);
  --c-radius:22px;
}

/* Filet de sécurité visuel */
html{background:var(--c-bg);color:var(--c-ink);}
body{
  background:var(--c-bg)!important;
  color:var(--c-ink)!important;
  font-family:"Manrope","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;max-width:100vw;
}

/* Aurora premium uniforme */
body::before{
  content:""!important;position:fixed!important;inset:0!important;z-index:-3!important;pointer-events:none;
  background:
    radial-gradient(900px 600px at 50% -10%, rgba(79,70,229,.22), transparent 60%),
    radial-gradient(700px 500px at 8% 30%, rgba(139,92,246,.14), transparent 60%),
    radial-gradient(800px 600px at 92% 60%, rgba(6,182,212,.10), transparent 60%),
    #040914 !important;
}

/* Typo titres */
h1,h2,h3{font-family:"Space Grotesk","Manrope",sans-serif;letter-spacing:-.02em;}
.gradient-text,.cloudy-gradient-text,
.text-transparent.bg-clip-text{
  background:var(--c-grad)!important;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}

/* Cards : iOS card + glass-card + liquid-card unifiées */
.ios-card,.glass-card,.liquid-card{
  background:var(--c-card)!important;
  border:1px solid var(--c-border)!important;
  border-radius:var(--c-radius)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 18px 50px rgba(0,0,0,.45)!important;
  backdrop-filter:blur(20px) saturate(1.1)!important;
  -webkit-backdrop-filter:blur(20px) saturate(1.1)!important;
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.ios-card:hover,.glass-card:hover{
  border-color:var(--c-border-hi)!important;
  transform:translateY(-3px)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 22px 60px rgba(0,0,0,.55)!important;
}

/* Boutons */
.btn-ios-primary,.btn-primary{
  background:var(--c-grad)!important;
  border-radius:999px!important;
  font-weight:700!important;
  color:#fff!important;
  box-shadow:0 10px 30px rgba(99,102,241,.35), inset 0 1px 0 rgba(255,255,255,.18)!important;
  transition:filter .2s ease, transform .2s ease;
}
.btn-ios-primary:hover,.btn-primary:hover{filter:brightness(1.07);transform:translateY(-1px);}
.btn-glass-white{
  background:rgba(255,255,255,.05)!important;
  border:1px solid rgba(255,255,255,.10)!important;
  border-radius:999px!important;
  backdrop-filter:blur(10px);
}
.btn-glass-white:hover{background:rgba(255,255,255,.10)!important;border-color:rgba(255,255,255,.22)!important;}

/* Inputs : 16px = pas de zoom auto iOS */
.ios-input{
  background:rgba(8,14,28,.72)!important;
  border:1px solid rgba(148,184,255,.14)!important;
  border-radius:14px!important;
  font-size:16px!important;color:#fff!important;
}
.ios-input:focus{border-color:var(--c-blue)!important;background:rgba(8,14,28,.92)!important;outline:none;}

/* Network badges */
.network-badge{
  background:rgba(255,255,255,.04)!important;
  border:1px solid rgba(148,184,255,.14)!important;
  color:#dbe4f3!important;padding:8px 14px;font-weight:600;font-size:13px;border-radius:999px;
}

/* Floating Telegram */
.whatsapp-float{
  background:linear-gradient(135deg,#229ED9,#3b82f6)!important;
  box-shadow:0 14px 30px rgba(34,158,217,.45)!important;
}

/* Hero */
#accueil h1{font-size:clamp(2.4rem, 8vw, 5.5rem);line-height:1.05;}
#accueil p{font-size:clamp(1rem, 2.6vw, 1.25rem);}

/* Carrousel mobile-first */
.carousel-item{flex:0 0 calc(40% - 6px)!important;margin-right:6px!important;}
@media (min-width:640px){.carousel-item{flex:0 0 calc(22% - 6px)!important;}}
@media (min-width:1024px){.carousel-item{flex:0 0 calc(12.5% - 6px)!important;}}
.carousel-item img{border-radius:14px;}

/* Désactive le zoom CSS hostile sur mobile (finaliser.html) */
@media (max-width: 900px){
  body{zoom:1!important;}
}

/* Mobile spacing cohérent */
@media (max-width: 640px){
  section{padding-top:2.25rem;padding-bottom:2.25rem;}
  h2{font-size:1.85rem!important;line-height:1.15;}
  h3{font-size:1.2rem!important;}
  .ios-card,.glass-card{border-radius:18px!important;}
}

img,video{max-width:100%;height:auto;}