/* =========================================================
   Silva — page publique (play-silva.xyz)
   Chargé après silva.css : mêmes jetons, même canopée.
   ========================================================= */
.silva .nav__logo svg{fill:none; stroke:#14210f; stroke-width:2.6}
.silva .nav.is-stuck::after{opacity:1}
.silva .nav__links a:hover{background:rgba(220,236,200,.06)}
.silva .tag{margin-left:0; color:var(--txt-2)}
.silva .tag--rank{background:rgba(159,203,124,.16); color:var(--a1)}
.silva .page code{padding:1px 6px; border-radius:6px; font-family:'JetBrains Mono',ui-monospace,monospace; font-size:.9em}
.silva .page{padding-top:40px}

/* ---------------- hero ---------------- */
.pl-hero{display:grid; justify-items:center; text-align:center; gap:18px; padding:clamp(40px,10vh,100px) 0 clamp(40px,8vh,80px)}
.silva .pl-hero h1{font-size:clamp(56px,11vw,112px); line-height:.95; letter-spacing:-.05em;
  background:linear-gradient(180deg,#f4f7ea 20%,#b2d690); -webkit-background-clip:text; background-clip:text; color:transparent}
.pl-hero__lead{max-width:560px; font-size:clamp(15px,2vw,17.5px); color:var(--txt-2); margin:0}

.pl-ip{display:flex; align-items:center; gap:clamp(14px,3vw,28px); padding:12px 12px 12px 24px; border-radius:99px; margin-top:8px; flex-wrap:wrap; justify-content:center}
.pl-ip__field{display:grid; text-align:left}
.pl-ip__field span{font-size:10.5px; text-transform:uppercase; letter-spacing:.14em; color:var(--txt-3); font-weight:600}
.pl-ip__field strong{font-size:17px; font-family:'JetBrains Mono',ui-monospace,monospace; color:var(--txt)}
.pl-ip .btn{padding:12px 22px}

.pl-stats{grid-template-columns:repeat(4,1fr); width:100%; max-width:820px; margin:18px 0 0; text-align:left}

/* ---------------- sections ---------------- */
.pl-sec{padding:clamp(30px,6vh,60px) 0; scroll-margin-top:70px}
.pl-sec__head{margin-bottom:24px; display:grid; gap:6px}
.silva .pl-sec h2{font-size:clamp(24px,3.6vw,34px)}

.pl-modes{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px}
.pl-mode-card{padding:20px 22px; border-radius:var(--r-l); display:grid; gap:8px; align-content:start; transition:transform .35s var(--ease)}
.pl-mode-card:hover{transform:translateY(-3px)}
.pl-mode-card .tag{justify-self:start}
.pl-mode-card h3{font-size:19px}
.pl-mode-card p{margin:0; font-size:14px; color:var(--txt-2)}

.pl-ffa{margin-top:16px; display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap}
.pl-ffa h3{font-size:19px; margin:6px 0}
.pl-ffa p{margin:0; color:var(--txt-2); font-size:14px; max-width:560px}
.pl-ffa__tags{display:flex; gap:8px; flex-wrap:wrap}
.pl-ffa__tags .tag{font-size:12px; padding:5px 12px}

.pl-steps{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px}
.pl-steps li{display:grid; gap:8px; align-content:start}
.pl-steps b{display:grid; place-items:center; width:34px; height:34px; border-radius:11px; background:var(--grad); color:#14210f; font-size:15px}
.pl-steps h3{font-size:17px}
.pl-steps p{margin:0; color:var(--txt-2); font-size:14px}
.pl-steps em{font-style:normal; color:var(--txt)}

.pl-cta{display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap}
.pl-cta h2{margin:6px 0}
.pl-cta .btn{padding:13px 24px; font-size:14px}

.silva .foot{border-top-color:var(--line-2)}

@media (max-width:900px){
  .pl-modes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pl-steps{grid-template-columns:1fr}
  .silva .nav__links{display:none}
}
@media (max-width:560px){
  .pl-modes{grid-template-columns:1fr}
  .pl-stats{grid-template-columns:repeat(2,1fr)}
  .pl-ip{border-radius:var(--r-l); padding:16px; width:100%}
  .pl-ip .btn{width:100%}
}