/* ─────────────────────────────────────────────────────────────────────
   Shared CSS for /fr/services/*.html and /services/*.html
   ───────────────────────────────────────────────────────────────────── */

html, body { margin:0; padding:0; }
[data-role="content"] { padding:0!important; margin:0!important; }
[data-role="header"] { border-bottom:1px solid #fff; }

/* Hero */
.svc-hero { background: linear-gradient(150deg, #2489ce 0%, #1a6faa 50%, #155d8c 100%); padding: 56px 20px 64px; text-align: center; color:#fff; }
.svc-hero-inner { max-width: 760px; margin: 0 auto; }
.svc-hero-icon { font-size:64px; line-height:1; color:#fff; margin-bottom:14px; opacity:.95; }
.svc-hero-eyebrow { font-size:12px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:rgba(255,255,255,.75); margin:0 0 10px; }
.svc-hero-title { font-size:32px; font-weight:800; color:#fff; margin:0 0 12px; letter-spacing:-0.5px; line-height:1.15; }
.svc-hero-sub { font-size:18px; color:rgba(255,255,255,.92); line-height:1.5; margin:0 auto 28px; max-width:560px; }
.svc-cta-row { display:flex; flex-direction:column; gap:14px; align-items:center; }

/* Sections */
.svc-section { padding:56px 20px; background:#fff; }
.svc-section.alt { background:#f7f9fc; }
.svc-section-inner { max-width:880px; margin:0 auto; }
.svc-section-title { font-size:24px; font-weight:800; color:#1a1a2e; margin:0 0 10px; text-align:center; }
.svc-section-sub { font-size:15px; color:#666; margin:0 auto 32px; text-align:center; max-width:600px; line-height:1.55; }

/* Feature list */
.svc-feature-list { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:20px; margin:0; padding:0; list-style:none; }
.svc-feature-item { background:#fff; border-radius:16px; padding:22px 20px; box-shadow:0 2px 14px rgba(0,0,0,.06); display:flex; flex-direction:column; }
.svc-section.alt .svc-feature-item { background:#fff; }
.svc-feature-emoji { font-size:30px; line-height:1; margin-bottom:10px; }
.svc-feature-h { font-size:15px; font-weight:700; color:#1a1a2e; margin:0 0 6px; }
.svc-feature-p { font-size:13px; color:#666; line-height:1.55; margin:0; }

/* Example cards */
.svc-examples { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:18px; }
.svc-example { border-radius:16px; overflow:hidden; box-shadow:0 4px 18px rgba(0,0,0,.08); background:#fff; display:flex; flex-direction:column; }
.svc-example img { width:100%; height:140px; object-fit:cover; display:block; }
.svc-example-body { padding:16px 18px 18px; }
.svc-example-label { font-size:11px; font-weight:700; letter-spacing:1px; color:#2489ce; text-transform:uppercase; margin-bottom:6px; }
.svc-example-t { font-size:15px; font-weight:700; color:#1a1a2e; margin:0 0 6px; }
.svc-example-p { font-size:13px; color:#666; line-height:1.5; margin:0; }

/* CTA bottom */
.svc-cta-bottom { background:linear-gradient(135deg,#2489ce,#155d8c); padding:48px 20px; text-align:center; color:#fff; }
.svc-cta-bottom h2 { font-size:24px; font-weight:800; margin:0 0 10px; color:#fff; }
.svc-cta-bottom p { font-size:15px; color:rgba(255,255,255,.9); margin:0 0 22px; }

/* Breadcrumb */
.svc-breadcrumb { max-width:880px; margin:0 auto; padding:18px 20px 0; line-height:1; }
.svc-breadcrumb ol { list-style:none; margin:0; padding:8px 16px; display:inline-flex; align-items:center; gap:8px; background:#f4f8fc; border-radius:999px; font-size:12.5px; line-height:1; box-shadow:0 1px 2px rgba(0,0,0,.04); }
.svc-breadcrumb li { display:inline-flex; align-items:center; gap:6px; color:#7a8a99; line-height:1; }
.svc-breadcrumb a { display:inline-flex; align-items:center; gap:6px; color:#2489ce; text-decoration:none; font-weight:600; transition:color .15s; line-height:1; }
.svc-breadcrumb a:hover { color:#155d8c; }
.svc-breadcrumb .sep { color:#c4d1de; font-size:13px; user-select:none; line-height:1; }
.svc-breadcrumb [aria-current="page"] { color:#1a1a2e; font-weight:700; }
.svc-breadcrumb i { font-size:13px; line-height:1; display:inline-block; vertical-align:middle; }

/* Comparison table */
.svc-compare-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; margin-top:8px; }
.svc-compare { width:100%; max-width:760px; margin:0 auto; border-collapse:separate; border-spacing:0; font-size:14px; }
.svc-compare th, .svc-compare td { padding:14px 14px; text-align:center; border-bottom:1px solid #e6edf3; }
.svc-compare thead th { font-size:13px; font-weight:700; color:#1a1a2e; background:#f4f8fc; }
.svc-compare thead th:first-child { text-align:left; }
.svc-compare tbody th { text-align:left; font-weight:600; color:#444; background:#fafcfe; }
.svc-compare .yes { color:#1e9d4f; font-weight:700; }
.svc-compare .no { color:#c33; font-weight:700; }
.svc-compare .partial { color:#d68a00; font-weight:700; }
.svc-compare tbody tr:last-child th, .svc-compare tbody tr:last-child td { border-bottom:none; }
.svc-compare-caption { font-size:11px; color:#999; text-align:center; margin-top:10px; }

/* Scenarios */
.svc-scenarios { display:flex; flex-direction:column; gap:24px; }
.svc-scenario { display:flex; gap:18px; align-items:flex-start; background:#fff; border-radius:16px; padding:22px; box-shadow:0 2px 14px rgba(0,0,0,.05); }
.svc-section.alt .svc-scenario { background:#fff; }
.svc-scenario-icon { flex-shrink:0; width:48px; height:48px; border-radius:12px; background:linear-gradient(135deg,#e8f3fc,#cfe4f4); display:flex; align-items:center; justify-content:center; font-size:24px; }
.svc-scenario-body h3 { font-size:16px; font-weight:700; color:#1a1a2e; margin:0 0 8px; }
.svc-scenario-body p { font-size:14px; color:#555; line-height:1.6; margin:0 0 8px; }
.svc-scenario-body p:last-child { margin-bottom:0; }
.svc-scenario-body a { color:#2489ce; text-decoration:none; font-weight:600; }
.svc-scenario-body a:hover { text-decoration:underline; }

/* FAQ */
.svc-faq { max-width:760px; margin:0 auto; }
.svc-faq details { background:#fff; border-radius:12px; padding:0; margin-bottom:10px; box-shadow:0 1px 6px rgba(0,0,0,.05); overflow:hidden; }
.svc-faq summary { padding:16px 20px; font-size:15px; font-weight:600; color:#1a1a2e; cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:14px; }
.svc-faq summary::-webkit-details-marker { display:none; }
.svc-faq summary::after { content:"+"; font-size:22px; color:#2489ce; font-weight:300; transition:transform .2s; flex-shrink:0; }
.svc-faq details[open] summary::after { content:"−"; }
.svc-faq details[open] summary { color:#2489ce; }
.svc-faq-answer { padding:0 20px 18px; font-size:14px; color:#555; line-height:1.65; }
.svc-faq-answer p { margin:0 0 10px; }
.svc-faq-answer p:last-child { margin-bottom:0; }

/* Related services */
.svc-related { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:14px; max-width:760px; margin:0 auto; }
.svc-related-card { background:#fff; border-radius:14px; padding:18px 16px; text-align:center; text-decoration:none; color:inherit; transition:transform .15s, box-shadow .15s; box-shadow:0 1px 6px rgba(0,0,0,.05); display:block; }
.svc-related-card:hover { transform:translateY(-2px); box-shadow:0 6px 20px rgba(36,137,206,.15); }
.svc-related-icon { font-size:28px; color:#2489ce; margin-bottom:8px; }
.svc-related-name { font-size:14px; font-weight:700; color:#1a1a2e; margin-bottom:4px; }
.svc-related-desc { font-size:12px; color:#888; line-height:1.45; }

/* Mock chat preview (used by discussion only) */
.svc-mock-chat { max-width:380px; margin:0 auto; background:#eef2f7; border-radius:18px; padding:18px 14px; box-shadow:0 8px 30px rgba(0,0,0,.12); }
.svc-mock-date { text-align:center; font-size:11px; color:#888; background:#fff; border-radius:12px; padding:3px 10px; display:inline-block; margin:0 auto 14px; }
.svc-mock-bubble { background:#fff; border-radius:12px; padding:9px 13px; margin-bottom:8px; max-width:75%; font-size:13.5px; color:#1a1a2e; line-height:1.4; box-shadow:0 1px 2px rgba(0,0,0,.05); position:relative; }
.svc-mock-bubble .who { display:block; font-size:11px; font-weight:700; color:#2489ce; margin-bottom:2px; }
.svc-mock-bubble .time { display:block; font-size:10px; color:#aaa; margin-top:4px; text-align:right; }
.svc-mock-bubble.me { background:#dcf3d4; margin-left:auto; }
.svc-mock-reactions { margin-top:4px; font-size:11px; }
.svc-mock-reactions .chip { display:inline-block; background:#fff; border-radius:10px; padding:1px 7px; margin-right:4px; box-shadow:0 1px 2px rgba(0,0,0,.06); }

@media (min-width:600px) {
	.svc-cta-row { flex-direction:row; justify-content:center; }
}