/* U8 — Luciole. Free font designed for low vision, sound for dys readers (luciole-vision.com,
   CC BY 4.0 — fonts/LICENCE-LUCIOLE.txt, fonts/README.md for provenance and subsetting). An
   ACCESSIBILITY feature, kept through the Caribbein port. It NEVER enters --font by default: it
   lives only under :root[data-police="luciole"] below, an attribute set by
   screens/famille.js:applyLectureNow() — independent of data-lecture (size) and data-calme
   (motion), so the three « La lecture » settings combine freely. size-adjust aligns Luciole's
   x-height on the default stack's. */
@font-face {
  font-family: "Luciole";
  src: url("fonts/luciole-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  size-adjust: 92%;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+0178, U+2010-2011, U+2013-2014, U+2018-2019, U+201C-201D, U+2026, U+2039-203A, U+20AC, U+2192;
}
@font-face {
  font-family: "Luciole";
  src: url("fonts/luciole-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  size-adjust: 92%;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+0178, U+2010-2011, U+2013-2014, U+2018-2019, U+201C-201D, U+2026, U+2039-203A, U+20AC, U+2192;
}

/* W4 (GA-readiness, 2026-09-13): self-hosting Geist + Fraunces closes the app's one third-party
   call (index.html used to preconnect fonts.googleapis.com / fonts.gstatic.com on every load —
   the app's DPIA names Caribbein as controller of minors' data, so that IP disclosure had to go).
   Same subsetting recipe as Newsreader/Luciole above — fonts/README.md carries the command and
   provenance. Geist and Fraunces (upright) ship as ONE variable file each: Google's own css2 API
   serves the identical physical file for every weight requested on a variable family, and browsers
   instantiate the exact CSS font-weight from the file's wght axis at render time — no need for one
   file per weight. size-adjust matches each face's sxHeight to the first font its own fallback
   stack would otherwise have shown (measured locally: Segoe UI 1024/2048 = 0.500 em — the same
   value the Luciole block above already used; Georgia 986/2048 = 0.481 em, matching the figure in
   fonts/README.md's Newsreader section, itself the first face in --serif's fallback chain). */
@font-face {
  font-family: "Geist";
  src: url("fonts/geist-var.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  size-adjust: 94%;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+0178, U+2010-2011, U+2013-2014, U+2018-2019, U+201C-201D, U+2026, U+2039-203A, U+20AC, U+2192;
}
@font-face {
  font-family: "Fraunces";
  src: url("fonts/fraunces-var.woff2") format("woff2-variations");
  font-weight: 500 600;
  font-style: normal;
  font-display: swap;
  size-adjust: 100%;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+0178, U+2010-2011, U+2013-2014, U+2018-2019, U+201C-201D, U+2026, U+2039-203A, U+20AC, U+2192;
}
@font-face {
  font-family: "Fraunces";
  src: url("fonts/fraunces-500-italic.woff2") format("woff2");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
  size-adjust: 102%;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+0178, U+2010-2011, U+2013-2014, U+2018-2019, U+201C-201D, U+2026, U+2039-203A, U+20AC, U+2192;
}

/* ════════════════════════════════════════════════════════════════════════════
   Caribbein · Famille — THE TOKEN LAYER.

   ⚠ THIS FILE IS THE ONLY PLACE IN THE FAMILLE APP WHERE A COLOUR VALUE EXISTS.
   Rule 1 survives the port: no screen hardcodes a colour — no hex, no rgb(), no
   named colour in any component file. Everything consumes var(--token);
   engine.js reads its SVG paint from these same tokens at runtime via
   getComputedStyle, which is why the drill animation wears the house colours.

   The gate:  grep -nE '#[0-9a-fA-F]{3,8}\b|rgba?\(' ma-famille/*.css ma-famille/*.js
              → only this file may match.

   ── ONE WORLD: « JOUR » — the Caribbein app's own light (design contract,
      STATE.md loop 04 row, Steven 2026-09-01) ─────────────────────────────────
   The source shipped two themes (dusk « Crépuscule » default + light
   « Terrain »). That dusk identity was the source's brand and does not survive;
   Caribbein's consumer app is one warm-paper world, and the famille section is
   a room of the same house. So: ONE theme, valued from app-everyday.html's own
   palette — paper #FBF7EF, ink #16242E, white cards, hairlines, the soft long
   shadow — and the section's ONE deliberate shift: it leads with the app's
   CORAL (the colour the nav's active state already taught every thumb) where
   the rest of the app leads teal.

   THE THREE LIGHTS map 1:1 onto the app's three accents — the convergence that
   makes this port honest:  école = teal #0A7D8F · sport = coral #E87D56 ·
   parole = amber #F5A623.  No invented colours (the sole exceptions: --danger,
   a functional red the palette lacks, and the darkened-coral --sport-ink,
   derived for 4.5:1 text contrast — same derivation the source's light theme
   already performed on its own orange).

   data-theme="terrain" intentionally has NO block: theme.js may still set the
   attribute (its API is kept — pure, tested), and it changes nothing. The
   « Ma famille » theme control is removed screen-side.
   ════════════════════════════════════════════════════════════════════════════ */

:root {
  /* sky — the app's paper, as a barely-there warm ramp */
  --sky-0: #FBF7EF;
  --sky-1: #FBF7EF;
  --sky-2: #F7F1E4;
  --sky-3: #F2EBDA;

  /* ink — the app's ink */
  --ink:        #16242E;
  --ink-muted:  rgba(22, 36, 46, .62);

  /* surfaces — white cards on paper, hairline borders, the app's soft shadow */
  --surface:      #FFFFFF;
  --surface-2:    #F7F2E7;
  --surface-3:    #F2ECDD;
  --line:         rgba(22, 36, 46, .09);
  --line-2:       rgba(22, 36, 46, .22);
  --line-dashed:  rgba(22, 36, 46, .16);
  --shadow-card:  0 10px 26px -16px rgba(13, 52, 62, .40);

  /* the three lights — the app's three accents, one per world */
  --school:      #0A7D8F;
  --sport:       #E87D56;
  --voice:       #F5A623;
  --ink-on-school: #FFFFFF;
  --ink-on-sport:  #16242E;
  --ink-on-voice:  #16242E;
  /* Coral reads ~3:1 as text on white — below the bar. --sport-ink is the same coral darkened
     until it clears 4.5:1 on --surface and on --sport-soft; fills/borders/glows keep the true
     coral above. Same split the source's light theme made for its own orange. */
  --sport-ink:     #B0532E;

  /* light-tinted derivatives — the app's own tint values where they exist */
  --school-soft:  rgba(10, 125, 143, .11);
  --school-line:  rgba(10, 125, 143, .28);
  --school-glow:  0 10px 30px -14px rgba(10, 125, 143, .25);
  --sport-soft:   rgba(232, 125, 86, .13);
  --sport-line:   rgba(232, 125, 86, .32);
  --sport-glow:   0 10px 30px -14px rgba(232, 125, 86, .28);
  --voice-soft:   rgba(245, 166, 35, .16);
  --voice-line:   rgba(245, 166, 35, .35);
  /* --voice-glow : ses deux sœurs (école, sport) avaient leur halo, la parole non — et .card.litV,
     que le plan nomme dans son vocabulaire et que deux unités à venir demandent, n’existait donc
     pas du tout. Même géométrie que les deux autres, teinte ambre, opacité entre les leurs. */
  --voice-glow:   0 10px 30px -14px rgba(245, 166, 35, .26);
  --voice-wash:   linear-gradient(135deg, rgba(245, 166, 35, .18), rgba(245, 166, 35, .06));

  /* status — the only red in the app, and it is never a badge on a parent */
  --danger:       #B4351B;
  --danger-line:  #E8BFB4;

  /* top bar — the app's .top: paper at 86 % over a blur (famille-in-app, top bar B, 2026-09-03) */
  --bar-bg:     rgba(251, 247, 239, .86);

  /* nav — the app's nav: near-white blur bar, hairline, CORAL active (as in the app) */
  --nav-bg:     rgba(255, 255, 255, .92);
  --nav-line:   rgba(22, 36, 46, .09);
  --nav-ink:    rgba(22, 36, 46, .46);
  --nav-ink-on: var(--sport);

  /* buttons + inputs */
  --btn-bg:      #FFFFFF;
  --btn-ink:     var(--ink);
  --btn-shadow:  0 2px 0 rgba(22, 36, 46, .10);
  --field-bg:    #F7F2E7;
  --chip-bg:     #F2ECDD;
  --chip-ink:    var(--ink);

  /* modal */
  --veil:        rgba(22, 36, 46, .38);
  --sheet-bg:    #FFFFFF;
  --sheet-line:  rgba(232, 125, 86, .30);

  /* the drill court — read by engine.js at runtime. The court keeps a dark ground
     (a terrain reads as a surface you stand on, not a sheet of paper — the source's
     own reasoning, kept); the paint on it is the house palette. */
  --court-bg:        #10262E;
  --court-inner:     #16323C;
  --court-line:      rgba(255, 255, 255, .22);
  --court-grid:      rgba(255, 255, 255, .07);
  --court-wall:      #1E3A44;
  --court-label:     #9FB3BA;
  --court-dim:       #6E838B;
  --actor-child:     #E87D56;
  --actor-child-ink: #16242E;
  --actor-parent:    #0A7D8F;
  --actor-parent-ink:#FFFFFF;
  --ball:            #F5A623;
  --ball-line:       #16242E;
  --trail-child:     rgba(232, 125, 86, .50);
  --trail-parent:    rgba(10, 125, 143, .45);
  --prop:            #9FB3BA;
  --prop-mark:       #E87D56;
  --bubble-child:    #F7DACD;
  --bubble-parent:   #CFE5E9;
  --bubble-ink:      #16242E;

  --focus: var(--sport);

  /* radii · type · layout — the app's grammar: Geist UI, Fraunces display, 480 shell */
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 18px;
  --r-xl: 26px;
  --r-pill: 999px;
  --font: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --mono: Consolas, ui-monospace, monospace;
  --shell-w: 480px;
}

/* One light world — native form controls, scrollbars and the browser's chrome follow it. */
:root { color-scheme: light; }

/* ── U8 — LA POLICE LUCIOLE ────────────────────────────────────────────────
   screens/famille.js applyLectureNow() sets/removes data-police="luciole" on <html> — an
   INDEPENDENT attribute beside data-lecture (size) and data-calme (motion), so the three
   « La lecture » settings combine freely. Only --font moves here; --serif (Fraunces, the
   child's-voice register) is untouched. Fallback keeps the default stack after Luciole, so a
   font that fails to load degrades to today's app, not to a serif or to tofu. */
:root[data-police="luciole"] { --font: "Luciole", "Geist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }

/* ── PAPER — the printed fiche is its own world and it is always light ────
   "Every item has a printable fallback." A parent with no time at 7am prints it;
   ink on paper is not a theme. */
@media print {
  :root {
    --paper:        #FFFFFF;
    --paper-ink:    #1D1F26;
    --paper-muted:  #6A6D78;
    --paper-rule:   #999999;
    --paper-hair:   #BBBBBB;
    --paper-band:   #F2F0E8;
    --paper-accent: #B8860B;
    --paper-wash:   #FAF6EC;
  }
}