:root{
  --pm:#2196f3; /* Pet&Me blue */
  --pm2:#00eaff; /* Pet&Me cyan */
  --pm3:#ffffff; /* White for gradients */
  --ink:#0b0b0f;--mut:#9aa3af;--bg:#0e0f12;--card:#111319;--glass:rgba(255,255,255,.06);--ring:rgba(33,150,243,.25)
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:radial-gradient(1200px 600px at 20% -10%,#1a1a1d 0%,transparent 60%),radial-gradient(900px 500px at 120% 10%,#2a1a1a 0%,transparent 55%),#0b0c10;color:#e7e9ee;font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
.container{max-width:1200px;margin:0 auto;padding:0 20px}

/* --- barre utilitaire flottante --- */
.topbar{
  position:fixed;inset:16px 16px auto 16px;display:flex;gap:10px;z-index:50
}
.pill{
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  background:var(--glass);border:1px solid rgba(255,255,255,.08);
  color:#fff;border-radius:999px;padding:10px 14px;display:flex;align-items:center;gap:10px;
  box-shadow:0 10px 30px rgba(0,0,0,.35)
}
.pill input{all:unset;color:#fff;opacity:.9}
.pill .btn{
  background:linear-gradient(90deg,var(--pm) 0%,var(--pm2) 60%,var(--pm3) 100%);
  color:#fff;
  padding:8px 18px;
  border-radius:999px;
  font-weight:700;
  box-shadow:0 2px 12px #2196f344,0 1px 0 #fff8;
  border:none;
  transition:background .18s,box-shadow .18s,transform .12s;
}
.pill .btn:hover{
  background:linear-gradient(90deg,var(--pm2) 0%,var(--pm) 80%,var(--pm3) 100%);
  color:#fff;
  box-shadow:0 6px 24px #00eaff44,0 4px 16px #0006;
  transform:translateY(-2px) scale(1.04);
}

/* --- hero --- */
.hero{
  position:relative;min-height:86vh;margin:0;display:grid;place-items:center;overflow:hidden
}
.hero video,.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.35;filter:saturate(1.1) contrast(1.05)}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,12,16,.0) 30%,rgba(11,12,16,.85) 100%)}
.hero .inner{position:relative;z-index:2;text-align:center;padding:80px 20px}
.badges{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:18px}
.badges a{padding:12px 16px;border-radius:14px;background:var(--glass);border:1px solid rgba(255,255,255,.12)}
.badges a.p{background:linear-gradient(135deg,var(--pm),var(--pm2));border-color:transparent}

/* --- quick actions flottantes --- */
.fab{
  position:fixed;right:18px;bottom:18px;display:flex;flex-direction:column;gap:10px;z-index:60
}
.fab a{
  background:linear-gradient(135deg,#e3f6ff 0%,#b3e0ff 60%,#2196f3 100%);
  color:#1565c0;
  border:1px solid #b3e0ff;
  padding:12px 18px;
  border-radius:16px;
  display:flex;align-items:center;gap:10px;
  box-shadow:0 8px 24px #2196f344,0 2px 8px #0002;
  font-weight:700;
  font-size:17px;
  transition:background .18s,box-shadow .18s,transform .12s;
}
.fab a.primary{
  background:linear-gradient(90deg,var(--pm) 0%,var(--pm2) 60%,var(--pm3) 100%);
  color:#fff;
  border:none;
  box-shadow:0 8px 32px #2196f366,0 2px 8px #00eaff33;
  letter-spacing:0.5px;
}
.fab a:hover{
  background:linear-gradient(135deg,#b3e0ff 0%,#2196f3 100%);
  color:#fff;
  transform:translateY(-2px) scale(1.04);
  box-shadow:0 12px 32px #2196f355,0 4px 16px #00eaff33;
}
.fab a.primary:hover{
  background:linear-gradient(90deg,var(--pm2) 0%,var(--pm) 80%,var(--pm3) 100%);
  color:#fff;
  box-shadow:0 16px 40px #00eaff55,0 6px 20px #2196f344;
}

/* --- cartes KPI --- */
.section{padding:56px 0}
.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.card{
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:18px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.03),0 10px 30px rgba(0,0,0,.35)
}
.card .k{font-size:13px;color:var(--mut)}
.card .v{font-size:32px;font-weight:800;display:flex;align-items:baseline;gap:6px}

/* --- slider animaux perdus --- */
.block{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.block h2{margin:0;font-size:clamp(22px,3vw,28px)}
.swiper{padding:8px 2px 38px}
.cardx{
  background:#fff !important;
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,.10);
  color:#222;
  transition:box-shadow .18s,transform .14s;
}
.cardx h3, .cardx .b, .cardx .meta, .cardx p {
  color:#222 !important;
}
.cardx img{width:100%;aspect-ratio:4/3;object-fit:cover}
.cardx .b{padding:12px}
.badge{display:inline-block;background:linear-gradient(135deg,var(--pm),var(--pm2));color:#fff;border-radius:999px;padding:4px 10px;font-size:12px}

/* --- carte vétérinaires --- */
#map{height:460px;border-radius:18px;border:1px solid rgba(255,255,255,.08);overflow:hidden}

/* --- grille boutique & news --- */
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.span-4{grid-column:span 4}
.span-6{grid-column:span 6}
@media (max-width:1024px){.cards{grid-template-columns:repeat(2,1fr)} .span-4,.span-6{grid-column:span 12}}
/* --- footer minimal --- */
.footer{padding:40px 0;color:#a5adbd;border-top:1px dashed rgba(255,255,255,.08);margin-top:50px}
.hr{height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent);margin:26px 0}

/* adminbar fix */
body.admin-bar .topbar{top:64px}