/* lameute · site marketing · patrons partagés (rendu Linear, peau ink-on-paper).
   Typographie XXL, sections numérotées (mono ambre), hairlines, zéro gradient. */

.site-section { max-width: var(--container-max, 1200px); margin: 0 auto; padding: 96px 32px; }
.site-section + .site-section { border-top: 1px solid var(--border-subtle); }

.s-eyebrow { font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ambre-600); }
.s-num { font-family: var(--font-mono); font-size: 13px; font-weight: 500; color: var(--text-muted); margin-right: 12px; }

.s-display { font-size: clamp(44px, 6vw, 76px); font-weight: 700; letter-spacing: -0.035em; line-height: 1.04; margin: 18px 0 0; color: var(--text-primary); text-wrap: balance; }
.s-h2 { font-size: clamp(28px, 3.4vw, 40px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; margin: 0; text-wrap: balance; }
.s-lede { font-size: 18px; line-height: 1.65; color: var(--text-secondary); margin: 22px 0 0; max-width: 620px; text-wrap: pretty; }
.s-body { font-size: 15px; line-height: 1.7; color: var(--text-secondary); margin: 14px 0 0; max-width: 560px; text-wrap: pretty; }
.s-body b, .s-lede b { color: var(--text-primary); font-weight: 600; }

/* En-tête de section façon Linear : titre à gauche, propos à droite */
.s-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 48px; align-items: start; }
@media (max-width: 880px) { .s-split { grid-template-columns: 1fr; } }

/* Rangée de points clés sur hairlines */
.s-points { margin-top: 56px; border-top: 1px solid var(--border-default); }
.s-point { display: grid; grid-template-columns: 64px minmax(0, 2fr) minmax(0, 3fr); gap: 24px; padding: 26px 0; border-bottom: 1px solid var(--border-subtle); align-items: baseline; }
.s-point .k { font-family: var(--font-mono); font-size: 12.5px; color: var(--text-muted); }
.s-point .t { font-size: 16.5px; font-weight: 600; letter-spacing: -0.015em; color: var(--text-primary); }
.s-point .d { font-size: 14px; line-height: 1.65; color: var(--text-secondary); text-wrap: pretty; margin: 0; }
@media (max-width: 880px) { .s-point { grid-template-columns: 48px 1fr; } .s-point .d { grid-column: 2; } }

/* Carte sobre (ProofStats idiom) */
.s-card { background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); padding: 24px 26px; }

/* Citation */
.s-quote { border-left: 2px solid var(--ambre-500); padding: 6px 0 6px 22px; margin: 0; }
.s-quote p { font-size: 19px; line-height: 1.55; letter-spacing: -0.01em; color: var(--text-primary); margin: 0; text-wrap: pretty; }
.s-quote footer { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); margin-top: 12px; }

/* CTA */
.s-cta { display: inline-flex; align-items: center; gap: 9px; height: 46px; padding: 0 20px; border-radius: var(--radius-lg); background: var(--ambre-600); color: #fff; text-decoration: none; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; transition: background var(--duration-fast) var(--ease-standard); }
.s-cta:hover { background: var(--ambre-700); }
.s-cta.ghost { background: transparent; color: var(--text-primary); border: 1px solid var(--border-strong); }
.s-cta.ghost:hover { background: var(--surface-hover); }

/* Bloc final inversé */
.s-ink { background: var(--n-950); color: #fff; }
.s-ink .s-h2, .s-ink .s-display { color: #fff; }
.s-ink .s-lede { color: var(--n-400); }

/* Étiquette de démo (case study sans résultats réels) */
.s-demo { display: inline-flex; align-items: center; gap: 7px; height: 24px; padding: 0 10px; border-radius: 99px; background: #FBF3E8; border: 1px solid var(--ambre-200); color: #8A5F0E; font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; white-space: nowrap; }

.s-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 880px) { .s-grid2 { grid-template-columns: 1fr; } }