/* app.css — the shared chrome. Link this, then keep only what a page ACTUALLY differs on.
 *
 * ────────────────────────────────────────────────────────────────────────────
 * WHY THIS FILE EXISTS, AND WHY THE REASON IS NOT "BYTES"
 * ────────────────────────────────────────────────────────────────────────────
 * Measured 2026-09-18 across all 89 pages: 2,125 distinct CSS rules over 4,253
 * instances. Only THIRTEEN rules were byte-identical on 20 pages or more, and
 * extracting them saves about 54 KB across the WHOLE SITE — roughly 600 bytes a
 * page. On a private family app that is not worth a visual regression.
 *
 * The reason to do it anyway is different: `.header` is identical on 47 pages and
 * `.back` on 61. Changing the top bar today means editing sixty-one files, and
 * the last person to try kept one copy of Sacha's Saturdays in sync by hand with
 * a comment that said "if a plan changes there, change it here." Nobody did. A
 * shared rule maintained by a comment is a future defect with a date on it.
 *
 * So: single point of change for the chrome. The byte saving is a rounding error
 * and this comment says so rather than letting a later reader assume otherwise.
 *
 * ────────────────────────────────────────────────────────────────────────────
 * FONTS ARE SELF-HOSTED, AND THREE OF THEM WERE NEARLY BROKEN
 * ────────────────────────────────────────────────────────────────────────────
 * 84 of 89 pages fetched Cormorant Garamond and Inter from Google, while the same
 * weights already sat in `assets/fonts/` and only index.html and home.html used
 * them. Every page made two preconnects plus an 18 KB render-blocking request to
 * a third party for files already on the server — and told Google every page view
 * by every member of this family. That is the real cost on a private app.
 *
 * TWO TRAPS, both caught by checking rather than trusting:
 *
 *   1. Google serves a font in SEVERAL SUBSETS and the first woff2 URL in the CSS
 *      is not the one you want. The first download of Cormorant 600, Inter 800
 *      and Inter 900 came back with 139-157 glyphs and NO é, è, à, ç, ê or œ.
 *      On a French app they would have rendered as tofu, on 6 pages, silently.
 *      They are now picked by testing each block's `unicode-range` against the
 *      actual accents, and all three carry 229-230 glyphs.
 *   2. `cormorant-garamond-400.woff2` and `-500.woff2` were BYTE-IDENTICAL, so
 *      `.hero h1` at weight 500 — on 25 pages — had never had a real 500 face.
 *      Replaced with the genuine one.
 *
 * `font-display: swap` is deliberate: text paints immediately in the fallback and
 * reflows when the face lands. A family app must never show a blank heading.
 */

/* ── Cormorant Garamond — display ─────────────────────────────────────────── */
@font-face { font-family:'Cormorant Garamond'; font-style:normal; font-weight:400;
             font-display:swap; src:url('fonts/cormorant-garamond-400.woff2') format('woff2'); }
@font-face { font-family:'Cormorant Garamond'; font-style:italic; font-weight:400;
             font-display:swap; src:url('fonts/cormorant-garamond-400-italic.woff2') format('woff2'); }
@font-face { font-family:'Cormorant Garamond'; font-style:normal; font-weight:500;
             font-display:swap; src:url('fonts/cormorant-garamond-500.woff2') format('woff2'); }
@font-face { font-family:'Cormorant Garamond'; font-style:normal; font-weight:600;
             font-display:swap; src:url('fonts/cormorant-garamond-600.woff2') format('woff2'); }
/* 700 exists because `repas/ecole/index.html` sets `.num` to Cormorant at weight
   700. Without a real cut the browser SYNTHESISES bold off the 600 face: no tofu,
   no blank text, just a visibly cruder letterform — and silently. Found only by an
   agent diffing every weight each page requests against what this file defines. */
@font-face { font-family:'Cormorant Garamond'; font-style:normal; font-weight:700;
             font-display:swap; src:url('fonts/cormorant-garamond-700.woff2') format('woff2'); }

/* ── Inter — body. 800 and 900 are used on 6 pages between them; they are here
      so those pages do not silently fall back to 700. ───────────────────────── */
@font-face { font-family:'Inter'; font-style:normal; font-weight:400;
             font-display:swap; src:url('fonts/inter-regular.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:500;
             font-display:swap; src:url('fonts/inter-medium.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:600;
             font-display:swap; src:url('fonts/inter-semibold.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:700;
             font-display:swap; src:url('fonts/inter-bold.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:800;
             font-display:swap; src:url('fonts/inter-extrabold.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:900;
             font-display:swap; src:url('fonts/inter-black.woff2') format('woff2'); }

/* ────────────────────────────────────────────────────────────────────────────
 * THE SHARED CHROME — nine rules, each byte-identical on 24 to 72 pages today.
 *
 * `.grid` and `.header-icon` are DELIBERATELY ABSENT. Each has TWO conflicting
 * variants in the wild (a 4-column grid and a 5-column one; a plain icon and a
 * gradient one), so hoisting either would silently relayout the pages using the
 * other. They stay per-page until somebody decides which is correct.
 *
 * This file is linked BEFORE a page's own <style>, so a page that genuinely
 * differs keeps its own rule and wins on source order. Migration is therefore
 * safe: delete from a page ONLY the rules that are byte-identical to the ones
 * below, and leave everything else alone.
 *
 * BUT THAT GUARANTEE IS PER DECLARATION, NOT PER RULE, and the earlier wording
 * here overstated it. A page whose `.content` sets only `padding` keeps its
 * padding — and now ALSO inherits the `max-width` and `margin` it never had,
 * because those declarations are not overridden by anything. Measured during the
 * 18 September migration: `family/judaisme/fete.html` was deliberately full-bleed
 * and became a centred 720px column on a wide screen; three pages' back-chevrons
 * shifted 16px; and `family/dimanche/index.html` — whose cards are <div>s built
 * in JS and are NOT clickable — started growing on hover.
 *
 * So when you migrate a page, diff the EFFECTIVE cascade for each selector, not
 * just the rule text, and expect to add a small override where a page was
 * relying on the absence of a declaration.
 *
 * BETTER STILL: if a page wants the TYPE and none of the furniture, link
 * `assets/fonts.css` instead of this file. It is generated from the @font-face
 * block below by `scripts/build_css.py`, it carries no chrome, and it cannot
 * drift — the deploy gate compares the two. Five pages were broken by taking
 * this file when they only ever wanted the fonts; that option now exists.
 * ──────────────────────────────────────────────────────────────────────────── */

* { margin: 0; padding: 0; box-sizing: border-box; }

body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
       background: #F8F9FA; color: #1A1A2E; min-height: 100vh; }

.header { position: fixed; top: 0; left: 0; right: 0; height: 56px; background: #FFFFFF;
          border-bottom: 1px solid #E0E0E0; display: flex; align-items: center;
          padding: 0 16px; z-index: 100; gap: 10px; }

.header-brand { font-weight: 700; font-size: 0.85rem; letter-spacing: 0.3em; color: #4361EE;
                text-transform: uppercase; }

.back { font-size: 1.3rem; text-decoration: none; color: #4361EE; display: flex;
        align-items: center; }

.content { padding: 72px 16px 32px; max-width: 720px; margin: 0 auto; }

.card { background: #FFFFFF; border-radius: 12px; overflow: hidden;
        box-shadow: 0 2px 8px rgba(0,0,0,0.08); text-decoration: none; color: inherit;
        transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1); display: block;
        position: relative; }

.card:hover { transform: scale(1.03); }

.hero h1 { font-family: 'Cormorant Garamond', serif; font-size: clamp(1.4rem, 5vw, 2.5rem);
           font-weight: 500; color: #1A1A2E; }