/* Pages de contenu (services, blog) : même identité que l'accueil, en HTML statique. */
:root {
  --heat-4: #2a6dfb0a; --heat-8: #2a6dfb14; --heat-12: #2a6dfb1f; --heat-16: #2a6dfb29; --heat-20: #2a6dfb33;
  --heat-100: #2a6dfb; --heat-button: #2a6dfb;
  --wrap: 1112px;
}
html { scroll-behavior: smooth; scroll-padding-top: 72px; }
body { background: #f9f9f9; font-size: 16px; line-height: 1.65; color: var(--accent-black); }
a { color: #2a6dfb; }
a:hover { color: #1f56d1; }
::selection { background: #2a6dfb33; color: #1f56d1; }
.sp-wrap { max-width: var(--wrap); margin: 0 auto; border-left: 1px solid var(--border-faint); border-right: 1px solid var(--border-faint); box-sizing: border-box; }

/* En-tête */

/* Contenu */
.sp-heroband { border-bottom: 1px solid var(--border-faint); }
.sp-hero { padding: 88px 40px 56px; }
.sp-crumbs { font-size: 13px; color: var(--black-alpha-48); margin-bottom: 20px; }
.sp-crumbs a { color: var(--black-alpha-56); } .sp-crumbs a:hover { color: var(--accent-black); }
.sp-eyebrow { display: inline-flex; align-items: center; gap: 10px; font: 500 12px/16px var(--font-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--black-alpha-56); margin-bottom: 16px; }
.sp-eyebrow::before { content: ""; width: 22px; height: 1px; background: #2a6dfb; }
h1.sp-title { margin: 0; font-size: clamp(34px, 5vw, 54px); line-height: 1.08; font-weight: 500; letter-spacing: -.02em; text-wrap: balance; max-width: 820px; }
h1.sp-title em, .sp-hl { font-style: normal; color: #2a6dfb; background: linear-gradient(transparent 70%, #2a6dfb26 70%, #2a6dfb26 92%, transparent 92%); padding: 0 .08em; }
.sp-lead { margin: 24px 0 0; max-width: 680px; font-size: 19px; line-height: 1.6; color: var(--black-alpha-72); text-wrap: pretty; }
.sp-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 32px; }
.sp-btn { display: inline-flex; align-items: center; padding: 10px 22px; border-radius: 999px; font-size: 15px; font-weight: 450; background: #2a6dfb; color: #fff; box-shadow: 0 1px 2px #2a6dfb40; transition: all .2s; }
.sp-btn:hover { background: #1f56d1; color: #fff; box-shadow: 0 4px 12px -2px #2a6dfb59; }
.sp-btn.sp-ghost { background: var(--black-alpha-4); color: var(--accent-black); box-shadow: none; }
.sp-btn.sp-ghost:hover { background: var(--black-alpha-6); color: var(--accent-black); }

.sp-body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 56px; padding: 56px 40px 88px; align-items: start; }
.sp-prose { max-width: 720px; min-width: 0; }
.sp-prose h2 { margin: 56px 0 14px; font-size: clamp(26px, 3.2vw, 34px); line-height: 1.15; font-weight: 500; letter-spacing: -.02em; text-wrap: balance; }
.sp-prose h2:first-child { margin-top: 0; }
.sp-prose h3 { margin: 32px 0 8px; font-size: 20px; line-height: 1.3; font-weight: 500; letter-spacing: -.01em; }
.sp-prose p { margin: 0 0 16px; color: var(--black-alpha-72); text-wrap: pretty; }
.sp-prose ul, .sp-prose ol { margin: 0 0 20px; padding-left: 22px; color: var(--black-alpha-72); }
.sp-prose li { margin-bottom: 8px; padding-left: 4px; }
.sp-prose li::marker { color: #2a6dfb; }
.sp-prose strong { color: var(--accent-black); font-weight: 500; }
.sp-callout { margin: 28px 0; padding: 20px 22px; background: #fff; border-radius: 14px; box-shadow: 0 0 0 1px var(--border-muted); }
.sp-callout p:last-child { margin-bottom: 0; }
.sp-steps { counter-reset: s; list-style: none; padding: 0 !important; display: grid; gap: 12px; }
.sp-steps li { counter-increment: s; padding: 16px 18px 16px 58px !important; background: #fff; border-radius: 12px; box-shadow: 0 0 0 1px var(--border-muted); position: relative; margin: 0 !important; }
.sp-steps li::before { content: counter(s, decimal-leading-zero); position: absolute; left: 18px; top: 17px; font: 500 13px/1.6 var(--font-mono); color: #2a6dfb; }
.sp-faq details { background: #fff; border-radius: 12px; box-shadow: 0 0 0 1px var(--border-muted); margin-bottom: 10px; padding: 0 18px; }
.sp-faq summary { cursor: pointer; padding: 15px 0; font-weight: 500; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.sp-faq summary::-webkit-details-marker { display: none; }
.sp-faq summary::after { content: "+"; color: #2a6dfb; font-size: 20px; line-height: 1.3; }
.sp-faq details[open] summary::after { content: "–"; }
.sp-faq details p { padding-bottom: 16px; margin: 0; }
.sp-meta { font-size: 14px; color: var(--black-alpha-48); margin-top: 20px; }

.sp-aside { position: sticky; top: 88px; display: grid; gap: 16px; }
.sp-card { background: #fff; border-radius: 16px; padding: 20px; box-shadow: 0 0 0 1px var(--border-muted); }
.sp-card h2 { margin: 0 0 10px; font: 500 12px/16px var(--font-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--black-alpha-56); }
.sp-card ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.sp-card li a { display: block; padding: 7px 0; font-size: 15px; line-height: 1.35; color: var(--accent-black); border-bottom: 1px solid var(--border-faint); }
.sp-card li:last-child a { border-bottom: 0; }
.sp-card li a:hover { color: #2a6dfb; }
.sp-card p { margin: 0 0 14px; font-size: 15px; color: var(--black-alpha-72); }

/* Index du blog */
.sp-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--border-faint); }
.sp-list a { display: block; padding: 32px 40px; color: var(--accent-black); border-bottom: 1px solid var(--border-faint); }
.sp-list a:nth-child(odd) { border-right: 1px solid var(--border-faint); }
.sp-list a:hover { background: #fff; color: var(--accent-black); }
.sp-list h2 { margin: 0 0 8px; font-size: 22px; line-height: 1.25; font-weight: 500; letter-spacing: -.01em; }
.sp-list p { margin: 0; color: var(--black-alpha-64); font-size: 15px; }
.sp-list small { display: block; margin-top: 14px; font: 500 12px/1 var(--font-sans); letter-spacing: .12em; text-transform: uppercase; color: #2a6dfb; }

/* Bandeau contact + pied de page */
.sp-band { background: #0c0e13; color: #fff; }
.sp-band .sp-wrap { border-color: #ffffff14; padding: 72px 40px; display: flex; justify-content: space-between; align-items: center; gap: 32px; flex-wrap: wrap; }
.sp-band h2 { margin: 0; font-size: clamp(28px, 4vw, 40px); line-height: 1.1; font-weight: 500; letter-spacing: -.02em; max-width: 620px; text-wrap: balance; }
.sp-band h2 span { color: #6b9bff; }
.sp-band p { margin: 14px 0 0; color: #ffffffb8; max-width: 520px; }
.sp-footer { background: #0c0e13; border-top: 1px solid #ffffff14; color: #ffffff66; font-size: 13px; }
.sp-footer .sp-wrap { border-color: #ffffff14; padding: 28px 40px; display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 32px; }
.sp-footer h3 { margin: 0 0 10px; font: 500 12px/16px var(--font-sans); letter-spacing: .14em; text-transform: uppercase; color: #ffffff8f; }
.sp-footer a { color: #ffffffb8; display: block; padding: 4px 0; } .sp-footer a:hover { color: #fff; }
.sp-footer p { margin: 0 0 6px; }

@media (max-width: 900px) {
  .sp-body { grid-template-columns: minmax(0, 1fr); gap: 40px; padding: 40px 20px 64px; }
  .sp-aside { position: static; }
  .sp-hero { padding: 56px 20px 40px; }
  .sp-list { grid-template-columns: minmax(0, 1fr); } .sp-list a { padding: 24px 20px; border-right: 0 !important; }
  .sp-band .sp-wrap { padding: 56px 20px; } .sp-footer .sp-wrap { grid-template-columns: 1fr; padding: 28px 20px; }
}

/* ---------- Animations des pages de contenu ---------- */
/* Fond de points + halo qui suit la souris (comme l'accueil) */
.sp-hero { position: relative; overflow: hidden; }
.sp-hero::before, .sp-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-size: 26px 26px; }
.sp-hero::before { background-image: radial-gradient(var(--border-loud) 1.2px, transparent 1.6px); }
.sp-hero::after { background-image: radial-gradient(#2a6dfb99 1.4px, transparent 1.8px); -webkit-mask-image: radial-gradient(circle 220px at var(--mx, 78%) var(--my, 30%), #000, transparent 75%); mask-image: radial-gradient(circle 220px at var(--mx, 78%) var(--my, 30%), #000, transparent 75%); }
.sp-hero > * { position: relative; z-index: 1; }

/* Entrée en fondu de l'introduction, éléments décalés */
@keyframes sp-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.sp-hero-text > *, .sp-hero > .sp-crumbs, .sp-hero > .sp-eyebrow, .sp-hero > .sp-title, .sp-hero > .sp-lead, .sp-hero > .sp-meta, .sp-viz { animation: sp-up .7s cubic-bezier(.2, .8, .2, 1) both; }
.sp-hero-text > :nth-child(2), .sp-hero > .sp-eyebrow { animation-delay: .06s; }
.sp-hero-text > :nth-child(3), .sp-hero > .sp-title { animation-delay: .12s; }
.sp-hero-text > :nth-child(4), .sp-hero > .sp-lead { animation-delay: .2s; }
.sp-hero-text > :nth-child(5), .sp-hero > .sp-meta { animation-delay: .28s; }
.sp-viz { animation-delay: .3s; }

/* Apparition au défilement (les classes sont posées par site.js, seulement sous la ligne de flottaison) */
.rv { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s cubic-bezier(.2, .8, .2, 1); transition-delay: var(--d, 0s); }
.rv.in { opacity: 1; transform: none; }

/* Barre de progression de lecture */
.sp-progress { position: absolute; left: 0; top: 0; height: 2px; width: 100%; background: #2a6dfb; transform-origin: 0 50%; transform: scaleX(0); z-index: 3; }

/* Survols */
.sp-card { transition: box-shadow .2s, transform .2s; }
.sp-card:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px var(--border-loud), 0 12px 28px -16px #0000002e; }
.sp-steps li { transition: box-shadow .2s, transform .2s; }
.sp-steps li:hover { transform: translateX(3px); box-shadow: 0 0 0 1px #2a6dfb59; }
.sp-faq details { transition: box-shadow .2s; }
.sp-faq details:hover, .sp-faq details[open] { box-shadow: 0 0 0 1px #2a6dfb59; }
.sp-list h2 { transition: color .2s; } .sp-list a:hover h2 { color: #2a6dfb; }
.sp-list small { transition: letter-spacing .25s; } .sp-list a:hover small { letter-spacing: .18em; }
.sp-btn:active { transform: translateY(1px); }

/* Schéma animé (service) */
.sp-hero.has-viz { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 56px; align-items: center; }
.sp-viz { background: #fff; border-radius: 20px; box-shadow: 0 0 0 1px var(--border-muted), 0 24px 48px -28px #0000003d; padding: 20px 22px 24px; display: flex; flex-direction: column; align-items: center; }
.viz-title { align-self: flex-start; display: flex; align-items: center; gap: 8px; font: 500 14px/20px var(--font-sans); margin-bottom: 18px; }
.viz-dot { width: 8px; height: 8px; border-radius: 50%; background: #2a6dfb; animation: viz-blink 1.6s ease-in-out infinite; }
.viz-in, .viz-out { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; min-height: 34px; }
.viz-chip { padding: 6px 12px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px var(--border-muted); font: 450 13px/18px var(--font-sans); white-space: nowrap; display: inline-flex; align-items: center; gap: 7px; }
.viz-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #2a6dfb; }
.viz-chip.out::before { background: #2fb45a; }
.viz-chip.in { animation: viz-in 6s ease-in-out infinite; animation-delay: calc(var(--i) * .25s); }
.viz-chip.out { animation: viz-out 6s ease-in-out infinite; animation-delay: calc(var(--i) * .22s); }
.viz-line { position: relative; width: 2px; height: 34px; margin: 4px 0; background: var(--border-muted); overflow: hidden; border-radius: 2px; }
.viz-line i { position: absolute; left: 0; top: -12px; width: 2px; height: 12px; background: linear-gradient(#2a6dfb00, #2a6dfb); animation: viz-drop 6s ease-in infinite; }
.viz-line.l2 i { animation-delay: 1.5s; }
.viz-core { position: relative; padding: 11px 22px; border-radius: 14px; background: #111318; color: #fff; font: 400 13px/18px var(--font-mono); letter-spacing: .04em; text-transform: uppercase; box-shadow: inset 0 -4px 0 #2a6dfb; animation: viz-pulse 6s ease-out infinite; }
@keyframes viz-blink { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
@keyframes viz-in { 0% { opacity: 0; transform: translateY(-8px); } 10%, 62% { opacity: 1; transform: none; } 78%, 100% { opacity: .25; transform: none; } }
@keyframes viz-out { 0%, 52% { opacity: 0; transform: translateY(8px); } 64%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes viz-drop { 0% { top: -12px; opacity: 0; } 8% { opacity: 1; } 30% { top: 34px; opacity: 1; } 31%, 100% { top: 34px; opacity: 0; } }
@keyframes viz-pulse { 0%, 22% { box-shadow: inset 0 -4px 0 #2a6dfb, 0 0 0 0 #2a6dfb00; } 32% { box-shadow: inset 0 -4px 0 #2a6dfb, 0 0 0 0 #2a6dfb66; } 52% { box-shadow: inset 0 -4px 0 #2a6dfb, 0 0 0 14px #2a6dfb00; } 100% { box-shadow: inset 0 -4px 0 #2a6dfb, 0 0 0 0 #2a6dfb00; } }
@media (max-width: 900px) { .sp-hero.has-viz { grid-template-columns: minmax(0, 1fr); gap: 36px; } .sp-viz { max-width: 440px; } }

@media (prefers-reduced-motion: reduce) {
  .sp-hero-text > *, .sp-hero > *, .sp-viz, .viz-chip, .viz-line i, .viz-core, .viz-dot { animation: none !important; }
  .viz-chip.out { opacity: 1; } .rv { opacity: 1; transform: none; transition: none; }
}