/* Salah El Yaakoubi (El Morologuista) — shared design system. Loaded on every page.
* Bump ?v=N in the whenever this file changes.
* Fonts: Bricolage Grotesque (headings), Noto Sans (body), Poppins (numbers).
*/
/* ===== RESET ===== */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{overflow-x:clip;font-family:'Noto Sans',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif;line-height:1.55;color:var(--fc-ink);background:var(--fc-cloud);-webkit-font-smoothing:antialiased}
[id]{scroll-margin-top:112px}
img{max-width:100%;display:block;height:auto}
a{color:var(--fc-blue);text-decoration:none}
a:hover{text-decoration:underline}
code,pre{overflow-wrap:anywhere;word-break:break-word}
.skip-link{position:absolute;left:-9999px;top:0;z-index:9999;padding:10px 14px;background:#0A2540;color:#fff;border-radius:0 0 6px 0;text-decoration:none}
.skip-link:focus{left:0}
pre{white-space:pre-wrap}
h1,h2,h3,h4{font-family:'Bricolage Grotesque','Noto Sans',sans-serif;line-height:1.15;letter-spacing:-.01em;color:var(--fc-ink);font-weight:700}
.num{font-family:'Poppins','Noto Sans',sans-serif;font-feature-settings:"tnum"}
/* ===== DESIGN TOKENS ===== */
:root{
--fc-blue:#0A6EBD; --fc-blue-dark:#08518E; --fc-blue-soft:#E8F1FB; --fc-blue-glow:rgba(10,110,189,.18);
--fc-red:#D6202E; --fc-red-dark:#C1121F; --fc-red-soft:#FDECEE;
--fc-orange:#FF7A1A; --fc-orange-dark:#E5640A; --fc-orange-soft:#FFF0E2;
--fc-wa:#0E7A6E; --fc-wa-dark:#0B5E54;
--fc-gold:#FFB020;
--fc-ink:#0B1120; --fc-ink-2:#1B2433; --fc-slate:#51607A; --fc-slate-2:#7A8699; --fc-cloud:#F6F8FB; --fc-line:#E4E9F2; --fc-white:#fff;
--fc-shadow:0 2px 10px rgba(11,17,32,.06);
--fc-shadow-md:0 8px 28px rgba(11,17,32,.08);
--fc-shadow-lg:0 18px 50px rgba(11,17,32,.12);
--fc-radius:14px; --fc-radius-lg:22px; --fc-radius-sm:9px; --fc-radius-pill:999px;
--fc-ease:cubic-bezier(.16,1,.3,1); --fc-spring:cubic-bezier(.34,1.56,.64,1);
--fc-maxw:1140px;
--fc-text-xs:.66rem; --fc-text-sm:.74rem; --fc-text-base:.82rem; --fc-text-md:.88rem;
--fc-text-lg:.95rem; --fc-text-xl:1.06rem; --fc-text-2xl:1.18rem;
--fc-text-3xl:clamp(1.22rem,.40rem + 2.4vw,1.62rem);
--fc-text-hero:clamp(1.45rem,.42rem + 3.4vw,2.20rem);
}
body{font-size:var(--fc-text-base)}
/* ===== INLINE SVG ICONS (replace emoji glyphs) =====
Each .icn is 1em×1em so it scales with its slot's font-size, exactly like
the emoji glyph it replaces. stroke=currentColor → inherits the slot color
(blue in .pin/.license-badge/.qf-ic, white on red/green buttons, gold in
.stars). Filled variants (.icn-fill / .stars .icn) for stars/ratings.
Slots that size