/* Page /services (préfixe sv-). Variables du thème : clair et sombre automatiques. */
.sv-hero{padding-bottom:3.5rem}
.sv-kicker,.sv-eyebrow{display:inline-flex;align-items:center;gap:.7rem;margin:0 0 1rem;font-size:.82rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.sv-kicker::before,.sv-kicker::after{content:"";width:2.2rem;height:2px;background:linear-gradient(90deg,transparent,var(--accent))}
.sv-kicker::after{rotate:180deg}
.sv-eyebrow::before{content:"";width:2rem;height:2px;background:linear-gradient(90deg,var(--accent),transparent)}

/* Cartes */
.sv-grid{display:grid;gap:1.25rem;margin-top:2.5rem}
.sv-g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.sv-g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.sv-g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.sv-card{position:relative;display:flex;flex-direction:column;gap:.2rem;padding:1.8rem;border-radius:1.8rem;background:var(--surface);border:1px solid var(--line);color:var(--ink);text-decoration:none;overflow:hidden;isolation:isolate;transition:transform .5s cubic-bezier(.2,.7,.2,1),border-color .3s,box-shadow .4s}
.sv-card::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;background:radial-gradient(420px circle at 20% 0%,color-mix(in srgb,var(--accent) 16%,transparent),transparent 65%);transition:opacity .4s}
.sv-card:hover,.sv-card:focus-visible{transform:translateY(-6px);border-color:var(--accent);box-shadow:0 30px 55px -32px rgba(11,92,255,.6)}
.sv-card:hover::before,.sv-card:focus-visible::before{opacity:1}
.sv-card h3{margin:.4rem 0 .3rem;font-size:1.25rem}
.sv-card h3 a{color:inherit;text-decoration:none}.sv-card h3 a:hover,.sv-card h3 a:focus-visible{text-decoration:underline}
.sv-card p{margin:0 0 1rem;color:var(--muted);font-size:.97rem}
.sv-ic{display:grid;place-items:center;width:3.2rem;height:3.2rem;margin-bottom:.4rem;border-radius:1.05rem;background:var(--soft);color:var(--accent);transition:background .3s,color .3s,transform .45s cubic-bezier(.3,1.6,.5,1)}
.sv-ic .ico-s{width:1.6rem;height:1.6rem}
.sv-card:hover .sv-ic{background:var(--accent);color:var(--on-accent);transform:rotate(-8deg) scale(1.08)}
.sv-more{display:inline-flex;align-items:center;gap:.5rem;margin-top:auto;font-weight:600;color:var(--accent)}
.sv-more svg{width:1.15rem;height:1.15rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s}
.sv-card:hover .sv-more svg{transform:translateX(6px)}
.sv-links{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1rem}
.sv-card .from{margin:0}

/* Sections détaillées (réutilise .svc .wrap, .rev, .illus, .checks du thème) */
.sv-sec{scroll-margin-top:5.5rem}
.sv-sec h2{font-size:clamp(1.9rem,4vw,2.9rem)}
.sv-sec h3{font-size:1.1rem;letter-spacing:-.01em;margin:1.4rem 0 .4rem}
.sv-sec h3::before{content:"";display:inline-block;width:.55rem;height:.55rem;margin-right:.6rem;border-radius:50%;background:var(--accent);vertical-align:.08em}
.sv-uses{list-style:none;margin:0 0 1.2rem;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.sv-uses li{padding:.45rem .95rem;border-radius:980px;background:var(--soft);color:var(--ink);border:1px solid var(--line);font-size:.92rem;line-height:1.35;transition:border-color .25s,transform .25s}
.sv-uses li:hover{border-color:var(--accent);transform:translateY(-2px)}
.sv-note{padding:.8rem 1rem;border-left:3px solid var(--accent);background:var(--soft);border-radius:0 .9rem .9rem 0;font-size:.95rem;color:var(--muted)}
.sv-sec .illus{transition:transform .7s cubic-bezier(.2,.7,.2,1)}.sv-sec .illus:hover{transform:scale(1.04) rotate(-1.5deg)}

/* Besoin → service */
.sv-needs{list-style:none;margin:2.2rem 0 1.8rem;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.sv-needs a{position:relative;display:grid;gap:.25rem;height:100%;padding:1.2rem 3.2rem 1.2rem 1.4rem;border-radius:1.4rem;background:var(--surface);border:1px solid var(--line);color:var(--ink);text-decoration:none;transition:transform .4s cubic-bezier(.2,.7,.2,1),border-color .3s,box-shadow .3s}
.sv-needs a span{font-weight:600}
.sv-needs a b{font-weight:500;font-size:.92rem;color:var(--accent)}
.sv-needs svg{position:absolute;right:1.2rem;top:50%;translate:0 -50%;width:1.2rem;height:1.2rem;fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s}
.sv-needs a:hover,.sv-needs a:focus-visible{transform:translateY(-4px);border-color:var(--accent);box-shadow:0 22px 40px -26px rgba(11,92,255,.6)}
.sv-needs a:hover svg{transform:translateX(5px)}

@media (max-width:1100px){.sv-g4,.sv-g3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:860px){.sv-g2{grid-template-columns:1fr}.sv-needs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.sv-g4,.sv-g3,.sv-needs{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){
  .sv-card,.sv-card::before,.sv-ic,.sv-more svg,.sv-uses li,.sv-sec .illus,.sv-needs a,.sv-needs svg{transition:none}
  .sv-card:hover,.sv-card:hover .sv-ic,.sv-uses li:hover,.sv-sec .illus:hover,.sv-needs a:hover{transform:none}
}