/* Marketing pages — explicit overrides on top of static/tailwind.css.
   Kept separate from page.css/index.css so the dashboard chrome and the
   public SEO surface evolve independently. */

/* Note (07/05/2026) — tried self-hosting Montserrat to drop the Google
   Fonts roundtrip; perf went from 94→92 and LCP 2.0s→2.8s because
   Google's CDN edges + per-script subsetting were faster than our origin
   even with preload. Reverted to Google Fonts link in base.html. */

:root {
    --mk-navy:        #1A4C7C;
    --mk-navy-deep:   #0F2D49;
    --mk-teal:        #195156;
    --mk-teal-hover:  #116036;
    --mk-bg-soft:     #F8F9FA;
    --mk-bg-tint:     #F0F4F8;
    --mk-text:        #374151;
    --mk-text-muted:  #6B7280;
    --mk-divider:     #E5E7EB;
}

/* The base.html sets `font-sans`; we want Montserrat to win even if Tailwind
   generates a different font-sans stack from its preflight. */
body, .font-sans {
    font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-feature-settings: 'kern', 'liga';
}

/* Smooth in-page anchor jumps from CTA secondary "Voir comment elle écrit". */
html { scroll-behavior: smooth; }

/* Native <details> chevron is browser-styled; ours uses a span so we hide
   the marker in webkit/firefox. */
summary::-webkit-details-marker { display: none; }
summary { list-style: none; }

/* Animate FAQ open/close on browsers that support `interpolate-size`.
   Falls back to instant toggle otherwise — still keyboard accessible. */
@supports (interpolate-size: allow-keywords) {
    details > div { transition: opacity 200ms ease; }
}

/* line-clamp utility for related-tasks card teaser. Tailwind v4 ships a
   plugin but the project's input.css doesn't enable it explicitly, so we
   inline it here to avoid touching tailwind.config. */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Above-the-fold guarantee: even on 320px-wide screens the primary CTA
   stays visible without horizontal scroll. */
@media (max-width: 375px) {
    h1 { font-size: 2rem; line-height: 1.15; }
}