/* ==========================================================================
HUSJ — Mon guide d'hospitalisation
Layout derived from "HUSJ_Mon Guide d'Hospitalisation_Fr.pdf";
colour and type taken from the host site.
INTEGRATION NOTES
- Every rule is scoped under .husj-guide, so nothing here can leak into
the rest of your site. Conversely, very aggressive global styles on your
site (e.g. `* { }` or `img { }` rules) may still reach inside; the reset
block below defends against the most common ones.
- Every class name is prefixed `husj-`.
- Selectors are written `.husj-guide.husj-guide .husj-x`. The doubled class
is deliberate: it lifts the component above the shallow class rules a host
theme aims at page content, and keeps it above the reset block without
depending on source order. Keep the prefix when adding rules.
- ROOT FONT SIZE. Everything here is sized in `rem`, so it is measured
against , not against this component. If the host theme ships
`html { font-size: 62.5% }` (a common WordPress idiom that makes 1rem =
10px), the whole guide renders at 62.5% scale — correct proportions,
uniformly too small. Check with, in the browser console on the live page:
getComputedStyle(document.documentElement).fontSize // expect "16px"
If it is not 16px, the rem values here need re-anchoring to a local unit
rather than to ; nothing else in this file will fix it.
- Type comes from the host site (Noto Serif + Dancing Script, loaded in
header.php). See section 1.
- Colour comes from the host site's :root palette (--dark-blue, --red,
--gray, --white, --purple, --dark). Every token carries the site's own
hex as a var() fallback, so the guide renders correctly standalone and
survives the palette being renamed. See section 15 for the mapping and
the measured contrast ratios.
- The icons are referenced from the markup, not from here — this file
contains no url(), so it can be moved on its own (e.g. into a theme's
/css folder) without any path edits. The markup expects:
icons/*.svg relative to the page
Each icon is a 0 0 100 100 viewBox with the artwork centred in it and a
baked #fff fill, matching the white PNGs it replaces. They are loaded
through
and switch the fill to currentColor if that is ever wanted.
========================================================================== */
/* --------------------------------------------------------------------------
1. Fonts — supplied by the host site
The guide uses the two families the theme already loads in header.php: