/* ==================================================
   SEOFactory — long-form service & guide pages
   (/creation-pages-seo, /referencement-site-vitrine, ...)
   Loaded after public.css and only on those pages: it reuses
   the public.css tokens and adds the reading components a
   landing grid doesn't have (breadcrumb, prose, tables, callouts).
================================================== */

.sf-guide-hero { padding: 56px 0 8px; }
.sf-guide-hero h1 {
  font-size: clamp(1.9rem, 4.2vw, 2.75rem);
  line-height: 1.12;
  letter-spacing: -0.03em;
  margin: 0 0 18px;
}
.sf-guide-hero .lead {
  font-size: 1.08rem;
  color: var(--sf-muted);
  line-height: 1.6;
  margin: 0 0 26px;
}

/* breadcrumb */
.sf-bc { font-size: 13px; color: var(--sf-muted-2); margin-bottom: 26px; }
.sf-bc ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.sf-bc li + li::before { content: "/"; margin-right: 6px; color: var(--sf-border-strong); }
.sf-bc a { color: var(--sf-muted); text-decoration: none; }
.sf-bc a:hover { color: var(--sf-primary); }
.sf-bc [aria-current] { color: var(--sf-fg); }

/* short self-contained answer right under the H1 */
.sf-answer {
  background: var(--sf-surface);
  border: 1px solid var(--sf-border);
  border-left: 3px solid var(--sf-primary);
  border-radius: var(--sf-radius-md);
  padding: 20px 22px;
  margin: 0 0 22px;
}
.sf-answer-label {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sf-primary);
  margin-bottom: 8px;
}
.sf-answer p { margin: 0; font-size: 15px; line-height: 1.65; }
.sf-answer p + p { margin-top: 10px; }

.sf-guide-actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 4px 0 0; }
.sf-guide-actions .btn-ghost { border-color: var(--sf-border-strong); color: var(--sf-fg); background: transparent; }
.sf-guide-actions .btn-ghost:hover { border-color: var(--sf-primary); color: var(--sf-primary); }

/* table of contents */
.sf-toc {
  margin: 36px 0 0;
  padding: 18px 22px;
  border: 1px solid var(--sf-border);
  border-radius: var(--sf-radius-md);
  background: var(--sf-bg-alt);
}
.sf-toc-title { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sf-muted); margin: 0 0 8px; }
.sf-toc ol { margin: 0; padding-left: 20px; font-size: 14px; }
.sf-toc li { margin: 4px 0; }
.sf-toc a { color: var(--sf-fg); text-decoration: none; }
.sf-toc a:hover { color: var(--sf-primary); text-decoration: underline; }

/* prose */
.sf-prose { padding: 24px 0 64px; font-size: 16px; line-height: 1.7; }
.sf-prose h2 {
  font-size: clamp(1.4rem, 2.6vw, 1.8rem);
  line-height: 1.2;
  letter-spacing: -0.025em;
  margin: 56px 0 14px;
}
.sf-prose h3 { font-size: 1.08rem; margin: 30px 0 8px; letter-spacing: -0.01em; }
.sf-prose p { margin: 0 0 16px; }
.sf-prose ul, .sf-prose ol { margin: 0 0 18px; padding-left: 22px; }
.sf-prose li { margin: 6px 0; }
.sf-prose a { color: var(--sf-primary); text-decoration: underline; text-underline-offset: 2px; }
.sf-prose a:hover { color: var(--sf-primary-hover); }
.sf-prose a.btn { text-decoration: none; }
.sf-prose a.btn-primary, .sf-prose a.btn-primary:hover { color: #fff; }
.sf-prose code { font-family: var(--sf-mono); font-size: 0.88em; background: var(--sf-bg-alt); padding: 1px 5px; border-radius: 4px; }
.sf-prose strong { font-weight: 650; }

/* tables: scroll horizontally on phones instead of breaking the page */
.sf-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 8px 0 22px;
  border: 1px solid var(--sf-border);
  border-radius: var(--sf-radius-md);
  background: var(--sf-surface);
}
.sf-table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.5; min-width: 560px; }
.sf-table caption { text-align: left; padding: 12px 16px 0; font-size: 12.5px; color: var(--sf-muted); caption-side: top; }
.sf-table th, .sf-table td { text-align: left; vertical-align: top; padding: 12px 16px; border-bottom: 1px solid var(--sf-border); }
.sf-table thead th { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--sf-muted); font-weight: 700; background: var(--sf-bg-alt); }
.sf-table tbody tr:last-child th, .sf-table tbody tr:last-child td { border-bottom: 0; }
.sf-table tbody th { font-weight: 650; }

/* callouts: fictional examples, warnings, limits */
.sf-callout {
  border-radius: var(--sf-radius-md);
  padding: 18px 20px;
  margin: 8px 0 22px;
  background: var(--sf-primary-bg);
  border: 1px solid rgba(109, 91, 255, 0.18);
  font-size: 15px;
}
.sf-callout p:last-child, .sf-callout ul:last-child { margin-bottom: 0; }
.sf-callout-label {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sf-primary-hover);
  margin-bottom: 6px;
}
.sf-callout.is-warning { background: #fff8ec; border-color: rgba(201, 128, 0, 0.22); }
.sf-callout.is-warning .sf-callout-label { color: #9a5d00; }

/* check / cross lists */
.sf-checks { list-style: none; padding-left: 0 !important; }
.sf-checks li { position: relative; padding-left: 26px; }
.sf-checks li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--sf-success); font-weight: 700; }
.sf-checks.is-no li::before { content: "✕"; color: #c0392b; }

/* small cards grid (page types, scenarios) */
.sf-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 10px 0 24px; }
.sf-card {
  background: var(--sf-surface);
  border: 1px solid var(--sf-border);
  border-radius: var(--sf-radius-md);
  padding: 18px 18px 16px;
}
.sf-card h3 { margin: 0 0 6px; font-size: 1rem; }
.sf-card p { margin: 0; font-size: 14px; color: var(--sf-muted); line-height: 1.55; }

/* numbered steps */
.sf-steps { counter-reset: sfstep; list-style: none; padding-left: 0 !important; }
.sf-steps > li { counter-increment: sfstep; position: relative; padding-left: 44px; margin: 0 0 18px; }
.sf-steps > li::before {
  content: counter(sfstep);
  position: absolute; left: 0; top: 0;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--sf-primary-bg); color: var(--sf-primary-hover);
  font-weight: 700; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
}
.sf-steps > li strong { display: block; }

/* text-only schematic (site architecture) */
.sf-tree-text {
  font-family: var(--sf-mono);
  font-size: 13px;
  line-height: 1.7;
  background: var(--sf-dark);
  color: var(--sf-dark-fg);
  border-radius: var(--sf-radius-md);
  padding: 18px 20px;
  overflow-x: auto;
  white-space: pre;
  margin: 8px 0 22px;
}

/* closing CTA panel */
.sf-guide-cta {
  background: var(--sf-dark);
  color: var(--sf-dark-fg);
  border-radius: var(--sf-radius-lg);
  padding: 32px 28px;
  margin: 48px 0 8px;
}
.sf-guide-cta h2 { color: var(--sf-dark-fg); margin: 0 0 10px !important; font-size: 1.45rem; }
.sf-guide-cta p { color: var(--sf-dark-muted); margin: 0 0 20px; font-size: 15px; }
.sf-guide-cta .btn-primary { background: var(--sf-primary); color: #fff; }
.sf-guide-cta .btn-primary:hover { background: var(--sf-primary-hover); }
.sf-guide-cta .btn-ghost { border-color: var(--sf-dark-border); color: var(--sf-dark-fg); background: transparent; }
.sf-guide-cta .btn-ghost:hover { border-color: var(--sf-primary-soft); color: #fff; }
.sf-prose .sf-guide-cta a.btn-ghost { color: var(--sf-dark-fg); }

/* FAQ inside prose reuses .sf-faq-item from public.css */
.sf-prose .sf-faq-list { margin-top: 10px; }
.sf-prose .sf-faq-item p { margin-left: 18px; }

/* related links + sources */
.sf-related, .sf-sources { margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--sf-border); }
.sf-related h2, .sf-sources h2 { font-size: 1rem !important; margin: 0 0 10px !important; letter-spacing: -0.01em; }
.sf-related ul, .sf-sources ul { font-size: 14px; }
.sf-sources ul { color: var(--sf-muted); }
.sf-updated { font-size: 13px; color: var(--sf-muted-2); margin-top: 26px; }

@media (max-width: 720px) {
  .sf-guide-hero { padding-top: 36px; }
  .sf-cards { grid-template-columns: 1fr; }
  .sf-prose { font-size: 15.5px; }
  .sf-prose h2 { margin-top: 44px; }
  .sf-guide-cta { padding: 26px 20px; }
  .sf-guide-actions .btn { width: 100%; }
}