/* =====================================================
   LINKS — basé sur ton style.css (vars, glass, shadow)
   ===================================================== */

.links-topbar .topbar-inner{
  max-width: 980px;
}

.links-brand{
  text-decoration: none;
  font-weight: 800;
  letter-spacing: .2px;
  font-size: 18px;
  padding: 10px 12px;
  border-radius: 12px;
}

.links-brand:hover{
  background: rgba(0,0,0,0.04);
}

.links-home{
  text-decoration: none;
  font-weight: 700;
  padding: 10px 12px;
  border-radius: 12px;
}

.links-home:hover{
  background: rgba(0,0,0,0.04);
}

/* page */
.links-page{
  max-width: 980px;
  margin: 0 auto;
  padding: 34px 20px 50px;
}

.links-card{
  margin: 0 auto;
  max-width: 520px;
  background: var(--bg);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  border-radius: 22px;
  padding: 22px;
  position: relative;
  overflow: hidden;
}

/* petit glow discret */
.links-card::before{
  content:"";
  position:absolute;
  inset:-120px -120px auto auto;
  width: 240px;
  height: 240px;
  background: radial-gradient(circle, rgba(246,199,147,.55), rgba(246,199,147,0) 60%);
  pointer-events:none;
}

.links-head h1{
  margin: 0 0 6px 0;
  font-size: 28px;
  letter-spacing: .2px;
}

.links-head p{
  margin: 0 0 18px 0;
  color: var(--muted);
  font-weight: 600;
}

/* liste */
.links-list{
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* bouton style "card press" */
.link-row{
  display: grid;
  grid-template-columns: 44px 1fr 30px;
  align-items: center;
  gap: 12px;

  text-decoration: none;
  color: var(--text);

  padding: 14px 14px;
  border-radius: 16px;

  background: #fff;
  border: 1px solid var(--line);

  box-shadow: 0 10px 26px rgba(0,0,0,0.06);
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}

.link-row:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(0,0,0,0.10);
  border-color: rgba(0,0,0,0.14);
}

.link-row:active{
  transform: translateY(0px);
  box-shadow: 0 10px 22px rgba(0,0,0,0.08);
}

.link-ico{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-size: 18px;
  font-weight: 800;
  border: 1px solid var(--line);
  background: rgba(0,0,0,0.02);
}

.link-label{
  font-weight: 800;
  letter-spacing: .1px;
}

.link-go{
  justify-self: end;
  font-weight: 900;
  color: rgba(0,0,0,0.55);
}

/* accents par réseau (sobre, pas “cheap”) */
.is-portfolio .link-ico{
  background: rgba(246,199,147,0.45);
  border-color: rgba(246,199,147,0.70);
}

.is-facebook .link-ico{
  background: rgba(24,119,242,0.14);
  border-color: rgba(24,119,242,0.30);
}

.is-instagram .link-ico{
  background: linear-gradient(135deg, rgba(245,133,41,0.16), rgba(221,42,123,0.14), rgba(129,52,175,0.14));
  border-color: rgba(129,52,175,0.22);
}

.is-linkedin .link-ico{
  background: rgba(10,102,194,0.14);
  border-color: rgba(10,102,194,0.30);
}

/* footer */
.links-foot{
  margin-top: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--muted);
  font-weight: 700;
}

.pill{
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--text);
  font-weight: 800;
}

.dot{
  opacity: .65;
}

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

/* responsive */
@media (max-width: 520px){
  .links-page{ padding: 26px 14px 40px; }
  .links-card{ padding: 18px; border-radius: 20px; }
  .links-head h1{ font-size: 24px; }
  .link-row{ padding: 12px 12px; border-radius: 14px; }
  .link-ico{ width: 42px; height: 42px; border-radius: 14px; }
}