/* Fiches /services/* — mise en page « asf » et effets au défilement. */
.asf {
	--asf-ink: #141A21; --asf-ink-2: #3A4650; --asf-muted: #5E6974; --asf-line: #E3E9ED; --asf-wash: #F5F7F9;
	--asf-red: #D62F2B; --asf-red-wash: #FDECEA; --asf-green: #2E8B68; --asf-ease: cubic-bezier(.16, 1, .3, 1);
	display: grid; gap: clamp(48px, 6vw, 80px); color: var(--asf-ink-2);
}
.asf h2 { font-size: clamp(26px, 2.6vw, 36px); line-height: 1.15; letter-spacing: -.02em; color: var(--asf-ink); margin: 0 0 18px; text-wrap: balance; }
.asf p { margin: 0 0 12px; font-size: 16px; line-height: 1.75; }
.asf p:last-child { margin-bottom: 0; }

/* Chapeau et faits */
.asf-intro { display: grid; gap: 22px; }
.asf-lead { font-size: clamp(18px, 1.6vw, 21px) !important; line-height: 1.6 !important; color: var(--asf-ink) !important; padding-left: 20px; border-left: 3px solid var(--asf-red); }
.asf-facts { list-style: none; margin: 0; padding: 0 !important; display: flex; flex-wrap: wrap; gap: 10px; }
.asf-facts li { margin: 0 !important; padding: 9px 14px 9px 34px !important; border: 1px solid var(--asf-line); border-radius: 999px; background: #fff; font-size: 14px; color: var(--asf-ink); position: relative; }
.asf-facts li::before { content: "" !important; position: absolute; left: 13px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: var(--asf-green); box-shadow: 0 0 0 3px #E6F3ED; }

/* Bloc texte + illustration */
.asf-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(24px, 4vw, 48px); align-items: center; }
.asf-media { border-radius: 24px; background: linear-gradient(160deg, #F7F9FB, #EEF3F7); padding: 12px; overflow: hidden; }
.asf-media--wide { grid-column: 1 / -1; }
.asf-svg svg { display: block; width: 100%; height: auto; }
@media (max-width: 900px) { .asf-split { grid-template-columns: 1fr; } }

/* Cartes de cas d'usage */
.asf-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.asf-card { background: #fff; border: 1px solid var(--asf-line); border-radius: 18px; padding: 22px; display: grid; gap: 14px; align-content: start; transition: transform .45s var(--asf-ease), box-shadow .45s var(--asf-ease), border-color .3s; }
.asf-card:hover { transform: translateY(-4px); box-shadow: 0 24px 40px -30px rgba(20, 26, 33, .45); border-color: #F3C3BF; }
.asf-card p { font-size: 15px !important; line-height: 1.55 !important; color: var(--asf-ink) !important; }
.asf-ico { width: 44px; height: 44px; border-radius: 14px; background: var(--asf-red-wash); display: grid; place-items: center; }
.asf-ico svg { width: 22px; height: 22px; stroke: var(--asf-red); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Liste cochée */
.asf-checks { list-style: none; margin: 0; padding: 0 !important; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px 28px; }
.asf-checks li { margin: 0 !important; padding: 0 0 0 34px !important; position: relative; font-size: 15.5px; line-height: 1.55; color: var(--asf-ink); }
.asf-checks li::before { content: "" !important; position: absolute; left: 0; top: 1px; width: 22px; height: 22px; border-radius: 50%; background: var(--asf-green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M6.5 11.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 22px no-repeat; }

/* Encadré « solution maison » */
.asf-callout { border-radius: 20px; background: var(--asf-red-wash); padding: clamp(22px, 3vw, 32px); display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: start; }
.asf-callout h2 { font-size: 22px; margin-bottom: 8px; }
.asf-callout .asf-ico { background: #fff; }

/* Panneau sombre (conformité, contrôle) */
.asf-panel { border-radius: 28px; background: radial-gradient(70% 90% at 90% 0%, rgba(214, 47, 43, .38), transparent 60%), var(--asf-ink); padding: clamp(28px, 4vw, 48px); color: #C9D2D9; }
.asf-panel h2 { color: #fff; }
.asf-panel p { color: #C9D2D9 !important; }
.asf-panel .asf-kicker { color: #FF8A7F; }

/* Étapes */
.asf-steps { list-style: none; margin: 0; padding: 0 !important; counter-reset: asf; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; }
.asf-steps li { counter-increment: asf; margin: 0 !important; padding: 56px 18px 20px !important; position: relative; border-top: 3px solid var(--asf-line); font-size: 15px; line-height: 1.5; color: var(--asf-ink); }
.asf-steps li::before { content: counter(asf, decimal-leading-zero) !important; position: absolute; left: 18px; top: 16px; width: auto; height: auto; background: none; font-size: 26px; font-weight: 700; line-height: 1; color: var(--asf-red); letter-spacing: -.02em; }
.asf-steps li:first-child { border-top-color: var(--asf-red); }

.asf-kicker { display: inline-block; font-size: 12px !important; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--asf-red); margin: 0 0 10px !important; }

/* FAQ */
.asf-q { border-bottom: 1px solid var(--asf-line); }
.asf-q:first-of-type { border-top: 1px solid var(--asf-line); }
.asf-q summary { cursor: pointer; list-style: none; padding: 20px 44px 20px 0; position: relative; font-size: 18px; font-weight: 600; line-height: 1.4; color: var(--asf-ink); }
.asf-q summary::-webkit-details-marker { display: none; }
.asf-q summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 26px; height: 26px; margin-top: -13px; border-radius: 50%; background: var(--asf-red-wash) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cpath d='M8 13h10M13 8v10' stroke='%23D62F2B' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / 26px no-repeat; transition: transform .35s var(--asf-ease); }
.asf-q[open] summary::after { transform: rotate(45deg); }
.asf-q summary:focus-visible { outline: 2px solid var(--asf-red); outline-offset: 4px; border-radius: 6px; }
.asf-q > div { padding: 0 44px 22px 0; }

/* Liens connexes */
.asf-related ul { list-style: none; margin: 0; padding: 0 !important; display: flex; flex-wrap: wrap; gap: 10px; }
.asf-related li { margin: 0 !important; padding: 0 !important; }
.asf-related li::before { display: none !important; }
.asf-related a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: 1px solid var(--asf-line); border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--asf-ink); text-decoration: none; transition: border-color .25s, color .25s; }
.asf-related a::after { content: "→"; color: var(--asf-red); }
.asf-related a:hover { border-color: var(--asf-red); color: var(--asf-red); }

/* Appel à l'action */
.asf-cta { border-radius: 28px; background: radial-gradient(60% 90% at 85% 15%, rgba(214, 47, 43, .95), rgba(163, 18, 30, .6) 45%, transparent 75%), radial-gradient(45% 70% at 10% 100%, rgba(163, 18, 30, .7), transparent 70%), #0B0708; padding: clamp(32px, 5vw, 56px); color: #E9D9D8; }
.asf-cta h2 { color: #fff; }
.asf-cta p { color: rgba(255, 255, 255, .82) !important; max-width: 60ch; }
.asf-cta .asf-kicker { color: #FFB3AC; }
.asf-btn { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; padding: 15px 26px; border-radius: 999px; background: #fff; color: var(--asf-ink) !important; font-weight: 700; text-decoration: none !important; transition: transform .35s var(--asf-ease); }
.asf-btn::after { content: "→"; color: var(--asf-red); }
.asf-btn:hover { transform: translateY(-2px); }

/* ---------- Effets au défilement (seulement si le script tourne) ---------- */
html.asf-js .asf-reveal { opacity: 0; transform: translate3d(0, 34px, 0); filter: blur(6px); transition: opacity .9s var(--asf-ease), transform 1.1s var(--asf-ease), filter .9s var(--asf-ease); transition-delay: var(--asf-d, 0ms); }
html.asf-js .asf-reveal.is-in { opacity: 1; transform: none; filter: none; }
html.asf-js .asf-media { clip-path: inset(0 100% 0 0 round 24px); transition: clip-path 1.4s var(--asf-ease); }
html.asf-js .asf-media.is-in { clip-path: inset(0 0 0 0 round 24px); }
html.asf-js .asf-media .asf-svg { transform: translate3d(0, var(--asf-shift, 0px), 0); will-change: transform; }
html.asf-js .asf-expand { --k: 1; clip-path: inset(0 calc((1 - var(--k)) * 6%) round 28px); transform: scale(calc(.96 + var(--k) * .04)); will-change: clip-path, transform; }
@media (prefers-reduced-motion: reduce) {
	html.asf-js .asf-reveal, html.asf-js .asf-media, html.asf-js .asf-expand { opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important; transition: none !important; }
}