:root{
  --bg:#0b1220;
  --bg-2:#0f172a;
  --card:#0b1c3a;
  --text:#eef2f7;
  --muted:#a8b3c7;
  --brand:#0b5bd3;
  --brand-2:#1ea3ff;
  --ok:#19db8a;
  --danger:#ff5a5f;
  --ring:0 0 0 3px rgba(30,163,255,.22);
  --radius:16px;
  --shadow:0 10px 34px rgba(0,0,0,.30);
  --max:1120px;

  --gold:#ffd54a;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--text);
  background:
    radial-gradient(900px 320px at 50% -20%, rgba(30,163,255,.20), transparent 60%),
    radial-gradient(700px 260px at 20% 10%, rgba(25,219,138,.13), transparent 55%),
    linear-gradient(180deg,var(--bg) 0%, var(--bg-2) 100%);
  font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,Apple Color Emoji,Segoe UI Emoji;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

a{color:var(--brand-2);text-decoration:none}
a:hover{text-decoration:underline}

.container{max-width:var(--max);margin:0 auto;padding:0 20px}

/* skip link */
.skip{
  position:absolute;left:-9999px;top:auto
}
.skip:focus{
  left:16px;top:16px;background:#fff;color:#000;padding:8px 12px;border-radius:8px
}

/* Header / Nav */
header{
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(120%) blur(10px);
  background:rgba(10,14,22,.55);
  border-bottom:1px solid rgba(255,255,255,.08)
}

.nav{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; height:68px;
}

.brand{
  display:flex; align-items:center; gap:10px;
  font-weight:800; letter-spacing:.2px;
  color:var(--text);
  text-decoration:none;
}

.brand:hover{text-decoration:none}

.brand-logo{
  width:38px;height:38px;border-radius:12px;
  display:grid;place-items:center;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  color:white;font-weight:900;
  box-shadow:var(--shadow)
}

nav a{
  color:var(--text);
  opacity:.92;
  padding:9px 10px;
  border-radius:12px;
  transition:background .15s ease, opacity .15s ease;
}

nav a:hover{
  background:rgba(255,255,255,.06);
  text-decoration:none;
}

nav a.active{
  background:rgba(30,163,255,.12);
  border:1px solid rgba(30,163,255,.22);
  opacity:1;
}

.menu{
  display:flex; gap:6px; align-items:center;
}

.hamb{
  display:none;
  background:transparent;
  color:var(--text);
  border:1px solid rgba(255,255,255,.16);
  border-radius:12px;
  padding:8px 12px;
  cursor:pointer;
}

@media (max-width:860px){
  .hamb{display:inline-flex}
  nav{
    position:absolute;
    inset:68px 0 auto 0;
    background:rgba(8,12,20,.96);
    border-bottom:1px solid rgba(255,255,255,.08);
    display:none;
  }
  nav.open{display:block}
  nav .menu{
    flex-direction:column;
    align-items:stretch;
    padding:14px;
  }
  nav a{padding:12px}
}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px;
  padding:12px 16px;
  border-radius:14px;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  color:#fff;
  font-weight:800;
  border:none;
  box-shadow:var(--shadow);
  cursor:pointer;
  transition:transform .12s ease, filter .12s ease;
}

.btn:hover{
  transform:translateY(-1px);
  text-decoration:none;
  filter:brightness(1.03);
}

.btn:focus{
  outline:none;
  box-shadow:var(--ring);
}

.btn.outline{
  background:transparent;
  color:var(--text);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:none;
}

.btn.outline:hover{
  background:rgba(255,255,255,.06);
  filter:none;
}

/* Hero */
.hero{
  padding:70px 0 44px;
  border-bottom:1px solid rgba(255,255,255,.06);
}

.hero h1{
  font-size:clamp(28px,4.5vw,46px);
  line-height:1.12;
  margin:12px 0;
  letter-spacing:-.4px;
}

.hero p{
  color:var(--muted);
  margin:10px 0 18px;
}

.hero-cta{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:14px;
}

/* Layout helpers */
.row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px;
  align-items:center;
}
@media (max-width:900px){
  .row{grid-template-columns:1fr}
}

/* Sections */
section{padding:56px 0}
h2{
  font-size:clamp(22px,3vw,30px);
  margin:0 0 12px;
  letter-spacing:-.2px;
}
.lead{color:var(--muted);margin-top:0}

.grid{
  display:grid;
  gap:18px;
  grid-template-columns:repeat(3,minmax(0,1fr));
}

@media (max-width:960px){
  .grid{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:640px){
  .grid{grid-template-columns:1fr}
}

/* Cards */
.card{
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.09);
  border-radius:var(--radius);
  padding:18px;
  box-shadow:var(--shadow);
  position:relative;
  overflow:hidden;
}

.card::after{
  content:"";
  position:absolute;
  inset:-70px -70px auto auto;
  width:190px;
  height:190px;
  background:radial-gradient(circle, rgba(30,163,255,.18), transparent 60%);
  transform:rotate(15deg);
  pointer-events:none;
}

.card.highlight{
  border:1px solid rgba(25,219,138,.22);
}

.badge{
  display:inline-block;
  font-size:12px;
  padding:4px 10px;
  border-radius:999px;
  background:rgba(25,219,138,.15);
  color:#b7ffdd;
  border:1px solid rgba(25,219,138,.25);
}

.badge.gold{
  background:rgba(255,213,74,.12);
  color:#ffe9a6;
  border:1px solid rgba(255,213,74,.25);
}

.ok{color:var(--ok)}
.muted{color:var(--muted)}

.list{
  padding-left:18px;
  margin:10px 0 0;
}
.list li{
  margin:7px 0;
  color:var(--muted);
}

.mini-cta{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:10px;
}

/* CTA block */
.cta-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:22px;
}

.cta-right{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

@media (max-width:720px){
  .cta-card{flex-direction:column; align-items:flex-start}
}

/* Footer */
footer{
  padding:26px 0;
  color:var(--muted);
  border-top:1px solid rgba(255,255,255,.08);
  background:rgba(8,12,20,.55);
}

.foot{
  display:flex;
  gap:16px;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
}

.links{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

.pill{
  padding:7px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  color:var(--text);
  opacity:.9;
}

.pill:hover{
  background:rgba(255,255,255,.06);
  text-decoration:none;
}

/* ===================== APPS PAGE PREMIUM ===================== */
.app-card .app-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.app-mini{
  font-size:12.5px;
  opacity:.75;
}

.app-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  font-size:12.5px;
  font-weight:700;
}

.app-badge.blue{ background: rgba(22,119,255,.14); color:#1677ff; border:1px solid rgba(22,119,255,.28); }
.app-badge.green{ background: rgba(34,197,94,.14); color:#22c55e; border:1px solid rgba(34,197,94,.28); }
.app-badge.purple{ background: rgba(139,92,246,.14); color:#8b5cf6; border:1px solid rgba(139,92,246,.28); }

.app-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:12px;
}

/* Accent bordure subtile par app */
.app-blue{ border:1px solid rgba(22,119,255,.18); }
.app-green{ border:1px solid rgba(34,197,94,.18); }
.app-purple{ border:1px solid rgba(139,92,246,.18); }

/* Bouton TheSwissDeal en vert */
.btn.tsd{
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color:#fff;
  border:none;
}
.btn.tsd:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 25px rgba(34,197,94,0.25);
}

/* =========================
   GRIDS (3 colonnes / 2 colonnes)
   ========================= */

.grid-3{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
}

.grid-2{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
}

/* Responsive */
@media (max-width: 980px){
  .grid-3{ grid-template-columns: 1fr; }
  .grid-2{ grid-template-columns: 1fr; }
}

/* =========================
   ✅ STORE BUTTONS (Swiss Net Salary) — version premium
   ========================= */

.store-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
  margin-top:14px;
  align-items:stretch;
}

@media (max-width: 420px){
  .store-grid{
    grid-template-columns: 1fr;
  }
}

.store-btn{
  display:block;
  padding:14px 14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  box-shadow: 0 10px 24px rgba(0,0,0,.20);
  text-decoration:none !important;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
  height:100%;
}

.store-btn:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.08);
  border-color: rgba(30,163,255,.22);
  text-decoration:none !important;
}

.store-title{
  font-weight: 900;
  letter-spacing: .2px;
  color: var(--text);
  white-space: nowrap; /* ✅ évite le retour à la ligne */
}

.store-sub{
  margin-top:4px;
  font-size:.92rem;
  opacity:.78;
  color: var(--muted);
}

/* =========================
   ✅ FIX HAUTEUR + MINI STORE (TheSwissDeal)
   ========================= */

.app-card{
  display:flex;
  flex-direction:column;
  height:100%;
}

.app-bottom{
  margin-top:auto;
}

.store-grid.store-mini{
  margin-top:10px;
  gap:8px;
}

.store-grid.store-mini .store-btn{
  padding:10px 12px;
  border-radius:12px;
  box-shadow:none;
  background: rgba(255,255,255,.045);
}

.store-grid.store-mini .store-title{
  font-size:14px;
}

.store-grid.store-mini .store-sub{
  font-size:12.5px;
}