/* ═══════════════════════════════════════════════════════════
   LIQUID GLASS — design-system Apple iOS 26/27 (tout le site, thème clair)
   v2 : effet RENFORCÉ et visible (fond à profondeur, frost translucide,
   grosses ombres douces, coins très ronds, ressorts). Chargé après les
   styles de chaque page. (L'espace pro a sa propre couche dans _app.css.)
   ═══════════════════════════════════════════════════════════ */
:root{
  --gl:rgba(255,255,255,.72);
  --gl-hi:#ffffff;
  --gl-line:rgba(0,0,0,.06);
  --gl-shadow:0 2px 8px rgba(15,23,42,.06),0 18px 44px rgba(15,23,42,.13);
  --gl-shadow-lg:0 4px 12px rgba(15,23,42,.08),0 30px 70px rgba(15,23,42,.20);
  --gl-r:24px;
  --gl-spring:cubic-bezier(.34,1.56,.64,1);
}

/* Typo SF (vraie police Apple sur iPhone/Mac, Inter en repli) */
body{
  font-family:-apple-system,"SF Pro Display","SF Pro Text",'Space Grotesk',system-ui,'Segoe UI',sans-serif;
  letter-spacing:-.012em;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.hero h1{letter-spacing:-.035em}

/* Fond gris doux à profondeur → les cartes blanches FLOTTENT (look iOS Réglages) */
body{
  background-image:radial-gradient(150% 90% at 50% -5%,rgba(118,128,150,.16),rgba(118,128,150,0) 48%);
  background-attachment:fixed;
}

/* Headers / barres collantes en verre dépoli net */
.bar,.app-hdr,.ec-tabs,.tw-hdr{
  -webkit-backdrop-filter:blur(30px) saturate(200%);
  backdrop-filter:blur(30px) saturate(200%);
  box-shadow:inset 0 1px 0 var(--gl-hi),0 1px 14px rgba(15,23,42,.05);
}

/* Cartes en verre : frost translucide + grosse ombre douce + coins très ronds + ressort */
.card,.step-card,.wizard-card,.pack-opt,.opt,.svc-item,.inv-card,.vehc,.rdv-card,.my-veh-card,.success-card{
  background:var(--gl);
  -webkit-backdrop-filter:blur(18px) saturate(180%);
  backdrop-filter:blur(18px) saturate(180%);
  border:1px solid var(--gl-line);
  border-radius:var(--gl-r);
  box-shadow:inset 0 1px 0 var(--gl-hi),var(--gl-shadow);
  transition:transform .35s var(--gl-spring),box-shadow .3s ease,border-color .2s ease;
}
.inv-card:hover,.opt:hover,.pack-opt:hover,.vehc:hover,.svc-item:hover,.card:hover{
  transform:translateY(-3px);
  box-shadow:inset 0 1px 0 var(--gl-hi),var(--gl-shadow-lg);
}

/* Boutons : coins doux + ressort + ombre portée */
.btn,.btn-next,.btn-back,.bar-back,.cta,.tw-btn,.btn-primary,.btn-secondary{
  transition:transform .25s var(--gl-spring),background .2s ease,box-shadow .25s ease;
}
.btn-primary,.btn-next{box-shadow:0 6px 18px rgba(15,23,42,.18)}
.btn:active,.btn-next:active,.cta:active,.tw-btn:active,.btn-primary:active{transform:scale(.96)}

/* Apparition douce façon iOS */
@media(prefers-reduced-motion:no-preference){
  @keyframes glIn{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
  .inv-card,.vehc,.rdv-card,.step-card.is-open,.success-card{animation:glIn .45s var(--gl-spring) both}
}