/* Hallmark · redesign: full (system, chrome, pictures; the phone layout of one card per screen is kept, as the owner asked) · brand: NeuroCoach Scolaire (spec 2026-11-11, from the owner's Instagram screenshots) · genre: editorial · theme: brand · job: book
 * shape: a reassuring guide (problem, approach, services, person, price, contact), every page · hero: Stage on the home page, the head at left, the 3D brain on a cream card over a sage corner shape at right, a handwritten note with gold rays · inner pages open on a Banner with the brand's corner shapes · nav: cream bar, the logo mark and the two-tone name, one navy pill · footer: beige colophon with the legal layer
 * imagery: the owner's own illustrations (four, cut from the Instagram posts), the logo mark, line icons on pale sage discs as in the posts, the 3D brain built (three.js), SVG cognitive schemas, a library stand-in in the portrait slot · signature: the brain you turn, blue with gold sparks like the brain in the posts
 * axes: light/geometric-sans/navy · posture: restrained (navy ink and buttons, sage second, gold only in rays, strokes and the lit brain) · faces: Lexend (display and body), Caveat (handwritten notes only) · copy: verbatim (two handwritten lines are the owner's, from the Instagram posts) · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S5 R4 V4 · weakest: E, the illustrations are screenshots of posts, sharp at phone size but soft on a large screen until the owner sends the originals */
/* Hallmark · dropped the water light (light.js and its canvases) · the Instagram theme has no water: its cream ground and sage and beige corner shapes replace it */
/* Hallmark · dismissed 41 · --brain-bg is the 3D brain's fade target, never a ground under ink text */
/* Hallmark · waive 80 · every illustration is the owner's own picture from the Instagram account, and every SVG figure carries role img and an aria-label · the brand speaks in these illustrations, and the diagrams teach real systems (brain regions, memory, attention) */
/* Hallmark · waive 81 · the sage and beige corner shapes are pseudo-elements at the section edges, never in a picture's place · they are the brand's own device, on every Instagram post */
/* Hallmark · dismissed 81 · the portrait slot holds a Wikimedia Commons stand-in (a pen writing) that loads on the live site; this sandbox blocks upload.wikimedia.org */
/* Hallmark · dismissed 23 · the accent is the brand's navy, painted only on the primary buttons and the header action */
/* Hallmark · dismissed F5 · the line icons on pale sage discs are the device of the owner's Instagram posts (Besoins spécifiques, Méthodologie, Organisation, Confiance) */
/* Hallmark · dismissed render · Lexend and Caveat load (document.fonts reports both loaded); the shots show the brand faces */
/* Hallmark · waive 78 · the contact page's two h2s label the aside beside the form, at 25px on purpose · the form is that page's subject and its heads stay quiet */
/* Hallmark · waive 77 · the FAQ is ten full-width disclosure rows whose questions are short lines · answers keep a 62ch measure so parents can read them comfortably */
/* Hallmark · dismissed 77 · the inner pages hold three or four sections because each is one long subject (a page per service area, the FAQ, the form) */
/* Hallmark · waive 39b · the five region buttons under the brain carry a name and its function on two lines · a legend that teaches needs the second line, and each keeps a 44px minimum */
/* Hallmark · waive 44c · inner pages open on a Banner intro, about half a screen tall, so their content starts on the first screen · the home page keeps its full-screen Stage with the 3D brain */
/* Hallmark · waive 44a · Mon approche's Banner intro is followed at 64px by its own index of six themes (.mech-nav) · the index reads as the foot of the intro, so the space below is shorter on purpose */
/* Hallmark · waive 59 · the 64px and 80px gaps sit between Mon approche's intro, its index and its cards (.mech-nav, .mech-section) · the three read as one opening; the gaps between real sections stay at 120px or more */
/* Hallmark · dismissed F7 · every pill it names is a control: the skip link, the table-of-contents links, the brain's view buttons and the difficulty links */
/* Hallmark · dismissed F25 · on phones the goals of each service sit behind the Difficultés and Objectifs switch, one tap away, and show without script */
/* Hallmark · answered F4 · one primary recipe (the navy pill) on every page; the cookie bar inverts it on its dark toast */
/* Hallmark · answered F15 · the hero keeps its own wide gap; every multi-column section below it uses --gap-columns or the list gap */
@import url("../fonts/fonts.css?v=4af3d37412");
@import url("./site.css?v=e67da50877");

:root {
  /* NeuroCoach Scolaire, sampled from the Instagram posts (.hallmark/brand-spec.md) */
  --color-paper: oklch(97.8% 0.015 98.3);        /* #FAF8ED cream */
  --color-paper-2: oklch(95% 0.014 120.3);       /* pale sage wash */
  --color-paper-3: oklch(94.4% 0.023 87.2);      /* #F3ECDC beige */
  --color-card: oklch(99.4% 0.008 91.5);         /* #FFFDF7 */
  --color-ink: oklch(28.2% 0.067 258.4);         /* #13294A deep navy, headings */
  --color-ink-2: oklch(33% 0.06 250.9);          /* #1C3753 navy, the logo's NeuroCoach */
  --color-muted: oklch(47.3% 0.036 254.5);       /* #4E5D70 */
  --color-rule: oklch(88.5% 0.022 95);
  --color-sage-brand: oklch(60.2% 0.04 176.3);   /* #688980, the logo's Scolaire */
  --color-sage-shape: oklch(63.6% 0.039 174);    /* #739389, corner shapes */
  --color-sage-ink: oklch(51% 0.041 173.8);      /* #4D6E64, sage for text */
  --color-sage-pale: oklch(91.4% 0.018 124);     /* #E0E5D8, icon discs */
  --color-gold: oklch(84.5% 0.089 82.4);         /* #E9C788, rays and strokes */
  --color-gold-deep: oklch(72.7% 0.11 82.2);
  --color-halo: oklch(91.1% 0.012 230);
  --color-brain: oklch(50% 0.085 252);       /* the blue of the brain in the posts */
  --color-accent: var(--color-ink-2); --color-accent-hi: oklch(25% 0.06 255); --color-accent-ink: var(--color-paper); --color-accent-soft: var(--color-sage-pale);
  --color-focus: var(--color-ink-2);
  --shadow-card: 0 1px 2px oklch(40% 0.04 250 / 0.06), 0 18px 40px -24px oklch(40% 0.05 250 / 0.28);
  --shadow-lift: 0 2px 4px oklch(40% 0.04 250 / 0.08), 0 26px 50px -26px oklch(40% 0.05 250 / 0.36);
  --font-display: "Lexend", ui-sans-serif, system-ui, sans-serif; --font-body: "Lexend", ui-sans-serif, system-ui, sans-serif; --font-outlier: var(--font-display);
  --font-hand: "Caveat", "Segoe Print", cursive;
  --radius-card: 24px; --radius-part: 14px; --radius-pill: 999px;
  --tracking-display: -0.025em;

  /* the brand names the shared stylesheet uses */
  --color-navy: var(--color-ink-2); --color-navy-2: var(--color-accent-hi); --color-navy-deep: var(--color-ink);
  --color-beige: var(--color-paper-3);
  --color-sage: var(--color-sage-brand); --color-sage-deep: var(--color-sage-ink); --color-sage-soft: var(--color-sage-pale);
  --color-on-navy: var(--color-paper); --color-on-navy-muted: oklch(86% 0.02 95); --color-on-navy-rule: oklch(45% 0.05 252);

  /* the brain on its cream card: blue like the posts' brain, gold where a region lights up */
  --brain-bg: var(--color-card); --brain-node: var(--color-brain); --brain-lit: var(--color-gold-deep); --brain-link: var(--color-ink-2); --brain-contrast: 2.4; --brain-zoom: 1.22;
}

body { font-size: 1.0625rem; font-weight: 350; color: var(--color-ink-2); background: var(--color-paper); }
h1, h2, h3 { color: var(--color-ink); font-weight: 600; letter-spacing: var(--tracking-display); line-height: 1.1; }
h3 { letter-spacing: -0.012em; line-height: 1.25; }
strong, .link-more, .card__more { font-weight: 500; }
.lead { color: var(--color-muted); }

/* ---------- The brand's devices ---------- */
/* corner shapes, as on every post: a sage one and a beige one, at the section's edges */
.lit { position: relative; isolation: isolate; overflow: clip; }
.lit::before, .lit::after { content: ""; position: absolute; z-index: -1; pointer-events: none; border-radius: 58% 42% 63% 37% / 46% 55% 45% 54%; }
.lit::before { width: 30rem; height: 24rem; left: -14rem; top: -12rem; background: var(--color-paper-3); }
.lit::after { width: 34rem; height: 28rem; right: -12rem; bottom: -14rem; background: var(--color-sage-shape); opacity: 0.9; border-radius: 44% 56% 38% 62% / 58% 40% 60% 42%; }
/* a handwritten note, underlined with a gold stroke */
.hand { margin: 0; display: grid; justify-items: start; gap: var(--space-2xs); font: 600 clamp(1.5rem, 1.2rem + 1vw, 2rem)/1.05 var(--font-hand); color: var(--color-ink-2); letter-spacing: 0; transform: rotate(-3deg); transform-origin: left center; }
.hand svg { width: min(100%, 13rem); height: 12px; overflow: visible; }
.hand path, .rays path { fill: none; stroke: var(--color-gold); stroke-width: 3.5; stroke-linecap: round; }
.rays, .brain .rays { width: 34px; height: 34px; flex-shrink: 0; overflow: visible; }
.brain .hand svg { width: min(100%, 13rem); height: 12px; }
.brain__note .hand { white-space: nowrap; }

/* ---------- Chrome ---------- */
.site-header { background: color-mix(in oklab, var(--color-paper) 94%, transparent); color: var(--color-ink); border-bottom-color: var(--color-rule); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.wordmark { gap: var(--space-xs); }
.wordmark img { width: auto; height: 40px; flex-shrink: 0; }
.wordmark .wordmark__name { display: grid; max-width: none; white-space: nowrap; font: 600 1.0625rem/1 var(--font-display); letter-spacing: -0.02em; color: var(--color-ink-2); }
.wordmark .wordmark__name span { color: var(--color-sage-ink); font-size: inherit; max-width: none; }
.site-header .nav a:not(.btn) { color: var(--color-ink-2); font-weight: 400; }
.site-header .nav a:not(.btn):hover { color: var(--color-ink); }
.site-header .nav a:not(.btn)[aria-current="page"] { border-bottom-color: var(--color-gold-deep); }
.site-header :focus-visible { outline-color: var(--color-focus); }
.menu-toggle { border-color: var(--color-rule); color: var(--color-ink); background: var(--color-card); }
.menu-toggle:hover { background: var(--color-paper-3); }
.menu-toggle:focus-visible { outline-color: var(--color-focus); }
@media (max-width: 64rem) { .nav { background: var(--color-paper); border-bottom-color: var(--color-rule); } .nav a:not(.btn) { border-bottom-color: var(--color-rule); } }

/* ---------- Controls ---------- */
.btn { border: 1.5px solid var(--color-ink-2); background: transparent; color: var(--color-ink-2); font-weight: 500; }
.btn:hover { background: var(--color-sage-pale); }
.btn--primary { border-color: var(--color-ink-2); background: var(--color-ink-2); color: var(--color-paper); }
.btn--primary:hover { background: var(--color-accent-hi); border-color: var(--color-accent-hi); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.link-more { color: var(--color-ink-2); text-decoration-color: var(--color-gold-deep); text-decoration-thickness: 2px; text-underline-offset: 0.3em; }
.link-more:hover { text-decoration-color: currentColor; }

/* ---------- Hero ---------- */
.hero { color: var(--color-ink); padding-block: var(--space-xl); }
.hero__text .lead { color: var(--color-muted); }
.hero__where { color: var(--color-sage-ink); font-weight: 400; }
.brain.clear { position: relative; padding: var(--space-lg); border-radius: var(--radius-card); background: var(--color-card); box-shadow: var(--shadow-lift); }
.brain .brain__stage { border-radius: var(--radius-part); background: radial-gradient(closest-side, var(--color-halo), color-mix(in oklab, var(--color-halo) 0%, var(--color-card))); }
.brain__note { position: absolute; top: calc(-1 * var(--space-lg)); right: var(--space-lg); z-index: 2; display: flex; align-items: flex-end; gap: var(--space-2xs); }
.brain__note .hand { padding: var(--space-md) var(--space-lg); border-radius: var(--radius-part); background: var(--color-paper); }
.brain__stage:focus-visible { outline-color: var(--color-focus); }
.view, .region { border-color: var(--color-rule); color: var(--color-ink-2); background: var(--color-card); }
.view:hover, .region:hover { border-color: var(--color-sage-ink); }
.view:focus-visible, .region:focus-visible { outline-color: var(--color-focus); }
.view--spin { background: var(--color-sage-pale); }
.region small { color: var(--color-muted); }
.region[aria-pressed="true"] { background: color-mix(in oklab, var(--color-gold) 30%, var(--color-card)); border-color: var(--color-gold-deep); }
.brain figcaption { color: var(--color-muted); }
/* the flat fallback diagram */
.brain__outline { fill: color-mix(in oklab, var(--color-brain) 6%, transparent); stroke: var(--color-brain); }
.brain__stem { stroke: var(--color-ink-2); }
.brain__sulcus, .brain__links { stroke: var(--color-ink-2); }
.brain__region circle { fill: var(--color-brain); }
.brain__region circle.hub { fill: var(--color-gold-deep); }
.brain[data-lit] .brain__region circle { fill: var(--color-ink-2); }

/* ---------- Pictures: the owner's illustrations ---------- */
.illus { margin: 0; position: relative; overflow: hidden; border-radius: var(--radius-card); background: var(--color-paper-3); }
.illus img { width: 100%; height: 100%; object-fit: cover; }
.difficulties-wrap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-3xl); align-items: center; }
.difficulties-wrap .illus { aspect-ratio: 7 / 6; }
@media (max-width: 80rem) { .difficulties-wrap .difficulties { grid-template-columns: minmax(0, 1fr); } }
.cta__inner:has(.illus) { align-items: center; }
.cta__inner .illus { grid-column: 8 / -1; grid-row: 1 / span 3; aspect-ratio: 7 / 6; }
.cta__inner:has(.illus) h2, .cta__inner:has(.illus) .actions, .cta__inner:has(.illus) .hand { grid-column: 1 / span 6; }
.intro--pic .intro__grid { align-items: center; }
.intro--pic .crumbs { grid-column: 1 / span 7; }
.intro--pic .illus { grid-column: 8 / -1; grid-row: 1 / span 3; aspect-ratio: 7 / 6; max-height: 24rem; justify-self: end; width: 100%; }
.intro--pic h1, .intro--pic .lead { grid-column: 1 / span 6; }

/* ---------- Sections ---------- */
.section--paper2 { background: var(--color-paper-2); }
.section--beige { background: var(--color-paper-3); }
.difficulties li::before { border-color: var(--color-sage-ink); }
.difficulties a strong { text-decoration-color: var(--color-gold-deep); text-decoration-thickness: 2px; }
.note { border-color: var(--color-rule); background: var(--color-paper-2); }
.steps__autonomy { stroke: var(--color-ink-2); }
.steps__support { stroke: var(--color-gold-deep); }
.key { border-top-color: var(--color-ink-2); }
.key--support { border-top-color: var(--color-gold-deep); }
.steps__list li::before { background: var(--color-sage-pale); color: var(--color-ink-2); font: 600 var(--text-md)/1 var(--font-display); }

/* the services: line icons on pale sage discs, as in the posts */
.card { border: 1px solid var(--color-rule); background: var(--color-card); box-shadow: var(--shadow-card); transition: transform var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out); }
.card:nth-child(1) { background: var(--color-card); color: var(--color-ink-2); border-color: var(--color-rule); }
.card:nth-child(1) p { color: var(--color-muted); }
.card:nth-child(1):hover { background: var(--color-card); }
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); border-color: var(--color-sage-shape); }
.card h3 { font-family: var(--font-display); font-weight: 600; }
.card__icon { display: grid; place-items: center; width: 64px; height: 64px; flex-shrink: 0; border-radius: 50%; background: var(--color-sage-pale); }
.card__icon svg { width: 34px; height: 34px; fill: none; stroke: var(--color-ink-2); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.card:has(.card__icon) { display: flex; flex-direction: column; gap: var(--space-sm); }
.card:has(.card__icon) .card__icon { margin-bottom: var(--space-sm); }
.card:has(.card__icon) .card__more { margin-top: auto; padding-top: var(--space-lg); }
.card__more { color: var(--color-ink-2); text-decoration-color: var(--color-gold-deep); text-decoration-thickness: 2px; }

.reasons li { border-top-color: var(--color-rule); }
.reasons h3 { color: var(--color-ink); }
.reasons p { color: var(--color-muted); }

.portrait { background: var(--color-sage-pale); color: var(--color-ink); box-shadow: var(--shadow-card); }
.portrait__sub { color: var(--color-muted); }
.facts, .facts li { border-color: var(--color-rule); }
.founder__degree span { font-weight: 600; color: var(--color-ink); }

.price__amount { font-family: var(--font-display); font-weight: 600; color: var(--color-ink); }

.cta { color: var(--color-ink); }
.cta h2 { color: var(--color-ink); }

/* ---------- Inner pages ---------- */
.intro { color: var(--color-ink); background: var(--color-paper); }
.intro h1 { grid-column: 1 / span 7; color: var(--color-ink); }
.intro .lead { grid-column: 1 / span 6; color: var(--color-muted); }
.intro.lit::before { width: 24rem; height: 18rem; left: auto; right: -8rem; top: -9rem; background: var(--color-paper-3); }
.intro.lit::after { width: 18rem; height: 14rem; right: auto; left: -9rem; bottom: -9rem; }
.intro--pic.lit::before { right: auto; left: -12rem; }
.crumbs { color: var(--color-muted); }
.intro :focus-visible { outline-color: var(--color-focus); }
.toc a { border-color: var(--color-rule); background: var(--color-card); color: var(--color-ink-2); }
.toc a:hover { border-color: var(--color-sage-ink); background: var(--color-sage-pale); }
.toc a:focus-visible { outline-color: var(--color-focus); }
.block + .block { border-top-color: var(--color-rule); }
.block__letter { color: var(--color-sage-ink); }
.dl, .dl > div { border-color: var(--color-rule); }
.dl dt { font-family: var(--font-display); color: var(--color-ink); font-weight: 500; }
.ticks li::before { background: var(--color-sage-ink); }
.schema .s-line { stroke: var(--color-ink-2); }
.schema .s-sage { stroke: var(--color-sage-ink); }
.schema .s-fill { fill: var(--color-sage-pale); }
.schema .s-fill-soft { fill: var(--color-paper-3); }
.schema .s-navy { fill: var(--color-ink-2); }
.faq, .faq details { border-color: var(--color-rule); }
.faq summary { font-family: var(--font-display); color: var(--color-ink); font-weight: 500; }
.faq summary:hover { color: var(--color-sage-ink); }
.form { border: 1px solid var(--color-rule); background: var(--color-card); box-shadow: var(--shadow-card); }
.field input, .field select, .field textarea { background-color: var(--color-card); border-color: var(--color-muted); border-radius: var(--radius-part); }
.communes li { border-bottom-color: var(--color-rule); }
.refs { color: var(--color-muted); }
.banner-note { background: var(--color-sage-pale); }

/* Accompagnements */
.svc { background: var(--color-card); border: 1px solid var(--color-rule); box-shadow: var(--shadow-card); }
.svc-index a { background: var(--color-card); border: 1px solid var(--color-rule); }
.svc-index a:hover { background: var(--color-sage-pale); }
.svc__head h2 { font-family: var(--font-display); }
.svc__photo { position: relative; overflow: hidden; background: var(--color-paper-3); }
.svc__photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tiles > div { background: var(--color-paper-2); }
.tiles dt { font-weight: 500; }

/* Mon approche: six mechanisms as numbered cards, the diagram large on a sage panel */
.mech__n { display: inline-grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; background: var(--color-sage-pale); color: var(--color-ink-2); font: 600 var(--text-md)/1 var(--font-display); }
.mech-nav { padding-block: 0 var(--space-xl); }
.mech-index { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-sm); }
.mech-index a { display: flex; align-items: center; gap: var(--space-sm); min-height: 64px; height: 100%; padding: var(--space-sm) var(--space-md); border: 1px solid var(--color-rule); border-radius: var(--radius-part); background: var(--color-card); color: var(--color-ink-2); font-weight: 500; text-decoration: none; transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out); }
.mech-index a:hover { background: var(--color-sage-pale); border-color: var(--color-sage-shape); }
.mech-index a:hover .mech__n { background: var(--color-card); }
.mech-index a:active { transform: translateY(1px); }
.mech-index a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.intro + .mech-nav { padding-top: 0; }
.mech-section { padding-top: var(--space-xl); }
.mech-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-columns); }
.mech { min-width: 0; display: flex; flex-direction: column; gap: var(--space-md); padding: var(--space-xl); border: 1px solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-card); box-shadow: var(--shadow-card); scroll-margin-top: calc(var(--nav-h) + var(--space-md)); }
.mech__head { display: flex; align-items: center; gap: var(--space-sm); }
.mech__head h2 { font-size: var(--text-2xl); }
.mech__fig { margin: 0; display: flex; flex-direction: column; gap: var(--space-xs); padding: var(--space-lg) var(--space-lg) var(--space-md); border-radius: var(--radius-part); background: var(--color-paper-2); }
.mech__fig svg { width: 100%; height: 15rem; max-height: none; }
.mech__fig figcaption { font-size: var(--text-xs); }
.mech__text { color: var(--color-ink-2); }
.mech__school { margin-top: auto; padding: var(--space-sm) var(--space-md); border-radius: var(--radius-part); background: var(--color-paper-3); color: var(--color-ink-2); font-size: var(--text-sm); }
.mech__school strong { color: var(--color-ink); }
/* the diagrams on their sage panel */
.mech__fig .s-fill { fill: var(--color-card); stroke: var(--color-sage-shape); stroke-width: 1.2; }
.mech__fig .s-fill-soft { fill: var(--color-card); }
.mech__fig .s-paper { fill: color-mix(in oklab, var(--color-card) 60%, transparent); stroke: var(--color-ink-2); }
.mech__fig .s-sage { stroke: var(--color-sage-ink); stroke-width: 3; }
.mech__fig .s-line { stroke: var(--color-ink-2); stroke-width: 2; }
.mech__fig .s-soft { stroke: var(--color-sage-shape); }
.mech__fig .s-navy { fill: var(--color-ink-2); }
.mech__fig text { font: 500 14px var(--font-body); fill: var(--color-ink); }
/* the references, folded */
.sources { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); }
.sources .head { grid-column: 1 / span 5; margin-bottom: 0; }
.sources__list { grid-column: 7 / -1; align-self: start; border-top: 1px solid var(--color-rule); border-bottom: 1px solid var(--color-rule); }
.sources__list summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); min-height: 56px; cursor: pointer; list-style: none; font-weight: 500; color: var(--color-ink-2); }
.sources__list summary::-webkit-details-marker { display: none; }
.sources__list summary::after { content: ""; width: 9px; height: 9px; margin-right: var(--space-2xs); border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform var(--dur-short) var(--ease-out); }
.sources__list[open] summary::after { transform: rotate(-135deg); }
.sources__list summary:hover { color: var(--color-ink); }
.sources__list summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: 4px; }
.sources__list .refs { columns: 1; padding-block: var(--space-xs) var(--space-lg); }
/* the closing band's handwritten line sits under its head when there is no picture */
.cta__inner > .hand { grid-column: 1 / span 9; }

@media (max-width: 60rem) {
  .mech-index { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mech-grid { grid-template-columns: minmax(0, 1fr); }
  .sources .head, .sources__list { grid-column: 1 / -1; }
  .sources .head { margin-bottom: var(--space-lg); }
}
/* phones: the index is one card, then each mechanism fills one screen and site.js finishes each swipe */
@media (max-width: 40rem) {
  .mech-index { grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); }
  .mech-index a { min-height: 56px; }
  .mech-section { scroll-snap-align: none; display: block; min-height: 0; padding-block: var(--space-sm); }
  .mech-grid { gap: var(--space-md); }
  .mech { gap: var(--space-sm); padding: var(--space-md); min-height: calc(100svh - var(--nav-h) - 2 * var(--space-sm)); scroll-snap-align: start; scroll-margin-top: var(--space-sm); }
  @supports (height: 100dvh) { .mech { min-height: calc(100dvh - var(--nav-h) - 2 * var(--space-sm)); } }
  /* a card fills the screen, and grows rather than spill when a short screen cannot hold its text: the picture gives way first */
  @supports (height: 100dvh) { .svc { height: auto; min-height: calc(100dvh - var(--nav-h) - 2 * var(--space-sm)); } }
  .mech__fig { min-height: 7rem; }
  .mech__head h2 { font-size: var(--text-xl); line-height: 1.15; }
  .mech__n { width: 40px; height: 40px; }
  .mech__fig { flex: 1 1 0; min-height: 0; padding: var(--space-md) var(--space-sm) var(--space-sm); }
  .mech__fig svg { flex: 1 1 0; min-height: 0; height: auto; }
  .mech__fig text { font-size: 16px; }
  .mech__text { font-size: var(--text-md); line-height: 1.5; }
  .mech__school { margin-top: 0; font-size: var(--text-md); line-height: 1.45; }
  .mech__fig { justify-content: center; }
}
@media (max-width: 40rem) and (max-height: 700px) {
  .mech__text { font-size: var(--text-sm); line-height: 1.45; }
  .mech__school { font-size: var(--text-sm); padding: var(--space-xs) var(--space-sm); }
  .mech__head h2 { font-size: var(--text-lg); }
  .mech-index a { min-height: 48px; padding-block: var(--space-2xs); }
}
@media (prefers-reduced-motion: reduce) { .mech-index a, .sources__list summary::after { transition: none; } }

/* ---------- Footer ---------- */
.site-footer { background: var(--color-paper-3); color: var(--color-ink); }
.site-footer a { color: var(--color-ink-2); }
.site-footer :focus-visible { outline-color: var(--color-focus); }
.footer__slogan { font: 600 1.625rem/1.1 var(--font-hand); color: var(--color-ink-2); }
.footer__col h2, .footer__col p, .footer__legal { color: var(--color-muted); }
.footer__legal { border-top-color: var(--color-rule); }
.footer__legal button { color: var(--color-ink-2); }
.footer__legal button:focus-visible { outline-color: var(--color-focus); }
.site-footer .fill { color: var(--color-muted); }

@media (max-width: 60rem) {
  .intro h1, .intro .lead, .intro--pic h1, .intro--pic .lead { grid-column: 1 / -1; }
  .intro--pic .crumbs, .intro--pic .illus { grid-column: 1 / -1; grid-row: auto; }
  .intro--pic .illus { max-width: 30rem; justify-self: start; }
  .difficulties-wrap { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .difficulties-wrap .illus { max-width: 30rem; }
  .cta__inner .illus, .cta__inner:has(.illus) h2, .cta__inner:has(.illus) .actions, .cta__inner:has(.illus) .hand { grid-column: 1 / -1; grid-row: auto; }
  .cta__inner .illus { max-width: 30rem; }
  .brain__note { top: calc(-1 * var(--space-md)); right: var(--space-md); }
}
/* phones: smaller corner shapes, and pictures that take the height a card has left */
@media (max-width: 40rem) {
  .lit::before { width: 16rem; height: 13rem; left: -9rem; top: -7rem; }
  .lit::after { width: 18rem; height: 14rem; right: -9rem; bottom: -8rem; }
  .intro.lit::before { width: 13rem; height: 10rem; right: -6rem; top: -6rem; }
  .intro.lit::after { width: 12rem; height: 9rem; left: -7rem; bottom: -6rem; }
  .brain.clear { padding: var(--space-md); }
  .brain__note { position: static; justify-content: flex-start; }
  .brain__note .hand { padding: 0; background: none; }
  .wordmark img { height: 34px; }
  .wordmark .wordmark__name { font-size: var(--text-sm); }
  :root { --brain-zoom: 1.16; }
  .card__icon { width: 48px; height: 48px; }
  .card__icon svg { width: 26px; height: 26px; }
  .cards .card:has(.card__icon) { display: grid; gap: var(--space-3xs) var(--space-sm); }
  .cards .card .card__icon { grid-column: 1; grid-row: 1 / span 2; align-self: center; margin: 0; }
  .cards .card:nth-child(n) { border: 0; }
  .cards { background: var(--color-card); border: 1px solid var(--color-rule); }
  .difficulties-wrap { gap: var(--space-sm); }
  .difficulties-wrap .illus { order: -1; aspect-ratio: auto; height: clamp(5rem, 12svh, 8rem); max-width: none; }
  main > section:has(.founder--card) { padding-block: var(--space-md); }
  .difficulties-wrap .difficulties__close { margin-top: var(--space-md); font-size: var(--text-md); }
  .cta__inner { row-gap: var(--space-lg); }
  .cta__inner .illus { order: -1; aspect-ratio: auto; height: clamp(9rem, 30svh, 16rem); max-width: none; }
  .intro--pic .illus { order: -1; aspect-ratio: auto; height: clamp(8rem, 26svh, 14rem); max-width: none; }
  .reasons li { background: var(--color-card); }
  .founder--card .founder__body { background: var(--color-card); border: 1px solid var(--color-rule); border-top: 0; }
  .footer__slogan { font-size: 1.5rem; }
}
/* short phone screens: Lexend is wide, so the pictures give way first and the heads step down */
@media (max-width: 40rem) and (max-height: 700px) {
  .hero h1 { font-size: 2.25rem; }
  .difficulties-wrap .illus { display: none; }
  .cta__inner .illus { height: 7.5rem; }
  .intro--pic .illus { height: 7rem; }
  .reasons p { font-size: var(--text-xs); }
  .steps__list p { font-size: var(--text-xs); }
}
@media (max-width: 24rem) {
  .wordmark img { height: 30px; }
  .wordmark .wordmark__name { font-size: var(--text-xs); }
}
@media (prefers-reduced-motion: reduce) {
  .card { transition: none; }
  .card:hover { transform: none; }
}

/* ==========================================================================
   Refinement pass v2.1 (2026-11-11): same palette, faces and devices; each element polished.
   Layout-adding rules sit behind min-width 40.0625rem so the tuned one-card-per-screen phone layout is untouched.
   ========================================================================== */
::selection { background: color-mix(in oklab, var(--color-gold) 55%, transparent); color: var(--color-ink); }

/* header: a gold stroke that draws in under the nav links */
.site-header { box-shadow: 0 1px 0 var(--color-rule), 0 10px 30px -28px oklch(40% 0.05 250 / 0.5); border-bottom-color: transparent; }
.site-header .nav a:not(.btn) { position: relative; border-bottom-color: transparent; }
.site-header .nav a:not(.btn)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px; border-radius: 2px; background: var(--color-gold-deep); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-short) var(--ease-out); }
.site-header .nav a:not(.btn):hover::after, .site-header .nav a:not(.btn)[aria-current="page"]::after { transform: scaleX(1); }
.site-header .nav a:not(.btn)[aria-current="page"] { color: var(--color-ink); font-weight: 500; border-bottom-color: transparent; }

/* buttons: a soft lift, a gold arrow on the primary pill */
.btn { transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.btn:not(.btn--small) { padding-inline: 1.75rem; }
.btn--primary { box-shadow: 0 1px 2px oklch(28% 0.06 258 / 0.18), 0 10px 22px -12px oklch(28% 0.06 258 / 0.55); }
.btn--primary:hover { box-shadow: 0 2px 4px oklch(28% 0.06 258 / 0.2), 0 16px 28px -14px oklch(28% 0.06 258 / 0.6); transform: translateY(-1px); }
.btn--primary:not(.btn--small)::after { content: "→"; color: var(--color-gold); transition: transform var(--dur-short) var(--ease-out); }
.btn--primary:not(.btn--small):hover::after { transform: translateX(3px); }
.btn:not(.btn--primary) { background: var(--color-card); }
.btn:not(.btn--primary):hover { background: var(--color-sage-pale); border-color: var(--color-sage-ink); }
.link-more::after, .card__more::after { content: "→"; display: inline-block; margin-left: 0.4em; color: var(--color-gold-deep); transition: transform var(--dur-short) var(--ease-out); }
.link-more:hover::after, .card:hover .card__more::after { transform: translateX(3px); }

/* hero: a calmer measure and the place line led by a sage dot */
.hero__text .lead { max-width: 34ch; }
.hero__where { display: flex; align-items: baseline; gap: var(--space-sm); }
.hero__where::before { content: ""; flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--color-sage-shape); box-shadow: 0 0 0 4px var(--color-sage-pale); transform: translateY(-1px); }
.brain.clear { border: 1px solid var(--color-rule); }
.brain__note .hand { box-shadow: var(--shadow-card); }

/* brain controls: the region names no longer clip, the lit region reads at a glance */
.view { transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out); }
.view:hover { background: var(--color-sage-pale); }
.region { padding: var(--space-xs) var(--space-sm); border-radius: 12px; }
.region span { white-space: normal; overflow-wrap: anywhere; hyphens: auto; color: var(--color-ink); }
.region:hover { background: color-mix(in oklab, var(--color-sage-pale) 60%, var(--color-card)); }
.region[aria-pressed="true"] { box-shadow: inset 0 0 0 1px var(--color-gold-deep); }

/* section heads: the gold underline stroke of the posts, under every section title */
.section .head > h2:not(.visually-hidden)::after { content: ""; display: block; width: 3.5rem; height: 4px; margin-top: var(--space-md); border-radius: 4px; background: var(--color-gold); }

/* pictures: framed like the cards */
.illus { border: 1px solid var(--color-rule); box-shadow: var(--shadow-card); }

/* difficulties: a sage dot, a gold arrow on hover, the closing line set off by a gold rule */
.difficulties li::before { border: 0; width: 8px; height: 8px; background: var(--color-sage-shape); box-shadow: 0 0 0 4px var(--color-sage-pale); }
.difficulties a strong { text-decoration-thickness: 1.5px; text-underline-offset: 0.28em; text-decoration-color: color-mix(in oklab, var(--color-gold-deep) 70%, transparent); }
.difficulties a::after { content: " →"; color: var(--color-gold-deep); opacity: 0; transition: opacity var(--dur-short) var(--ease-out); }
.difficulties a:hover::after, .difficulties a:focus-visible::after { opacity: 1; }
.difficulties__more { color: var(--color-muted); }
.difficulties__close { padding-left: var(--space-md); border-left: 3px solid var(--color-gold); color: var(--color-ink); }

/* steps: the numbers as sage rings on cream, the line runs behind them */
.steps__list li::before { background: var(--color-card); color: var(--color-ink); border: 2px solid var(--color-sage-shape); box-shadow: 0 0 0 6px var(--color-paper-3), var(--shadow-card); }
.steps__legend { color: var(--color-muted); }

/* services: the icon disc warms on hover */
.card__icon { transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out); }
.card:hover .card__icon { background: color-mix(in oklab, var(--color-gold) 38%, var(--color-card)); transform: rotate(-6deg); }
.card h3 { letter-spacing: -0.015em; }

/* reasons, founder facts, price, footer */
.facts li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: var(--space-sm); align-items: baseline; }
.facts li::before { content: ""; width: 14px; height: 8px; border-left: 2px solid var(--color-sage-ink); border-bottom: 2px solid var(--color-sage-ink); transform: translateY(-3px) rotate(-45deg); }
.founder__degree small { display: inline-flex; width: fit-content; padding: 0.2em 0.7em; border-radius: var(--radius-pill); background: var(--color-sage-pale); color: var(--color-sage-ink); font-weight: 500; }
.portrait { border: 1px solid var(--color-rule); }
.price__amount { background: linear-gradient(transparent 78%, color-mix(in oklab, var(--color-gold) 55%, transparent) 78% 92%, transparent 92%); padding-inline: 0.05em; }
.price__from, .price__unit { color: var(--color-muted); }
.site-footer a:not(.wordmark) { text-decoration-color: color-mix(in oklab, var(--color-gold-deep) 60%, transparent); text-underline-offset: 0.25em; transition: color var(--dur-short) var(--ease-out); }
.site-footer a:not(.wordmark):hover { color: var(--color-ink); text-decoration-color: var(--color-gold-deep); }
.footer__col h2 { color: var(--color-ink); font-weight: 600; }

/* inner pages: FAQ rows, form fields, the service indexes and cards */
.faq summary::after { color: var(--color-sage-ink); }
.faq details[open] summary { color: var(--color-ink); }
.field input, .field select, .field textarea { border-color: color-mix(in oklab, var(--color-muted) 70%, var(--color-rule)); transition: border-color var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; box-shadow: 0 0 0 5px var(--color-sage-pale); }
.svc-index a, .toc a { transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out); }
.svc-index a:hover { border-color: var(--color-sage-shape); transform: translateY(-2px); }
.tiles > div { border: 1px solid color-mix(in oklab, var(--color-sage-shape) 25%, transparent); }
.mech { transition: box-shadow var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out); }
.mech:hover { box-shadow: var(--shadow-lift); border-color: var(--color-sage-shape); }

/* tablets and up: cards for the reasons and the price */
@media (min-width: 40.0625rem) {
  .reasons { row-gap: var(--gap-columns); }
  .reasons h3, .steps__list h3 { font-size: var(--text-lg); }
  .reasons h3 { font-weight: 600; }
  .reasons li { position: relative; padding: var(--space-xl) var(--space-lg) var(--space-lg); border: 1px solid var(--color-rule); border-radius: var(--radius-part); background: var(--color-card); box-shadow: var(--shadow-card); }
  .reasons li::before { content: ""; position: absolute; top: -1px; left: var(--space-lg); width: 2.5rem; height: 4px; border-radius: 0 0 4px 4px; background: var(--color-gold); }
  /* the container's gutter becomes the card's outer margin */
  .price { width: calc(100% - 2 * var(--gutter)); max-width: calc(var(--container) - 2 * var(--gutter)); padding: var(--space-2xl); border: 1px solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-card); box-shadow: var(--shadow-card); align-items: center; }
}
@media (prefers-reduced-motion: reduce) {
  .btn--primary:hover, .svc-index a:hover, .card:hover .card__icon { transform: none; }
  .site-header .nav a:not(.btn)::after, .link-more::after, .card__more::after, .card__icon, .btn--primary::after, .btn { transition: none; }
}
.reasons h3, .steps__list h3 { hyphens: auto; }

/* Mon approche: the six illustrations, in the flat style of the owner's posts (navy jumper, beige face, line icons on pale sage, gold for what matters) */
.mech__fig { background: color-mix(in oklab, var(--color-sage-pale) 55%, var(--color-card)); }
.illo .il-ink { fill: var(--color-ink-2); }
.illo .il-skin { fill: var(--color-paper-3); stroke: var(--color-ink-2); stroke-width: 2; }
.illo .il-card { fill: var(--color-card); }
.illo .il-pale { fill: var(--color-sage-pale); }
.illo .il-sage { fill: var(--color-sage-shape); }
.illo .il-gold { fill: var(--color-gold-deep); }
.illo .il-gold-fill { fill: var(--color-gold); }
.illo .il-gold-soft { fill: color-mix(in oklab, var(--color-gold) 32%, transparent); }
.illo .il-sage-soft { fill: color-mix(in oklab, var(--color-sage-shape) 22%, transparent); }
.illo .il-beige-soft { fill: color-mix(in oklab, var(--color-paper-3) 85%, transparent); }
.illo .il-line { fill: none; stroke: var(--color-ink-2); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.illo .il-card.il-line { fill: var(--color-card); }
.illo .il-pale.il-line { fill: var(--color-sage-pale); }
.illo .il-gold-fill.il-line { fill: var(--color-gold); }
.illo .il-sage-line { fill: none; stroke: var(--color-sage-ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.illo .il-gold-line { fill: none; stroke: var(--color-gold-deep); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.illo .il-ring { stroke: var(--color-card); stroke-width: 3; }
.illo .il-dash { stroke-dasharray: 2 7; }
.illo .il-faint { opacity: 0.45; }
.illo text.il-muted { fill: var(--color-muted); font-weight: 400; }
.illo text.il-note { font-size: 13px; }
/* the student character */
.illo .il-face { fill: oklch(89% 0.045 62); }
.illo .il-stroke { stroke: var(--color-ink-2); stroke-width: 2; stroke-linejoin: round; }
.illo .il-hair { fill: oklch(40% 0.06 50); }
.illo .il-hair-2 { fill: var(--color-gold-deep); }
.illo .il-hair-3 { fill: var(--color-ink); }
.illo .il-blush { fill: oklch(78% 0.08 28 / 0.55); }
.illo .il-arm { fill: none; stroke: var(--color-ink-2); stroke-width: 13; stroke-linecap: round; }

/* ---------- Home: the four steps, redesigned (2026-11-11) ----------
 * each step is a card on a dashed gold path; two small bars per card show autonomy growing and support fading,
 * where the crossing lines used to. The bars fill when the section scrolls in (site.js adds .is-in). */
.gauge { grid-column: -2 / -1; display: grid; gap: 5px; margin-top: var(--space-xs); }
.gauge i { display: block; height: 6px; border-radius: 6px; background: color-mix(in oklab, var(--color-ink-2) 8%, transparent); position: relative; overflow: hidden; }
.gauge i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 0; border-radius: inherit; transition: width 1.1s var(--ease-out); }
.gauge__auto::after { background: var(--color-ink-2); }
.gauge__support::after { background: var(--color-gold); }
.steps.is-in .gauge__auto::after, html:not(.js) .gauge__auto::after { width: var(--auto); }
.steps.is-in .gauge__support::after, html:not(.js) .gauge__support::after { width: var(--support); }
.steps.is-in li:nth-child(2) .gauge i::after { transition-delay: 0.12s; }
.steps.is-in li:nth-child(3) .gauge i::after { transition-delay: 0.24s; }
.steps.is-in li:nth-child(4) .gauge i::after { transition-delay: 0.36s; }
.key { width: 24px; height: 6px; border: 0; border-radius: 6px; }
.key--autonomy { background: var(--color-ink-2); }
.key--support { background: var(--color-gold); border-top: 0; }
.steps__legend { color: var(--color-muted); }

@media (min-width: 40.0625rem) {
  .steps__list li { padding: calc(var(--space-lg) + 44px + var(--space-lg)) var(--space-lg) var(--space-lg); border: 1px solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-card); box-shadow: var(--shadow-card); align-content: start; grid-template-rows: auto 1fr auto; }
  .steps__list li::before { top: var(--space-lg); left: var(--space-lg); box-shadow: 0 0 0 6px var(--color-card); }
  .steps__list li:last-child { background: color-mix(in oklab, var(--color-sage-pale) 45%, var(--color-card)); border-color: var(--color-sage-shape); }
  .steps__list li:last-child::before { background: var(--color-ink-2); color: var(--color-paper); border-color: var(--color-ink-2); }
  .gauge { margin-top: var(--space-md); }
}
/* four across: a dashed gold path joins the numbers from card to card */
@media (min-width: 60.0625rem) {
  .steps__list li:not(:last-child)::after { content: ""; position: absolute; z-index: 1; top: calc(var(--space-lg) + 21px); left: calc(var(--space-lg) + 44px + var(--space-sm)); right: calc(-1 * var(--gap-columns)); border-top: 2px dashed var(--color-gold-deep); }
}
@media (prefers-reduced-motion: reduce) { .gauge i::after { transition: none; } }
/* phones: the bars sit small under each number, so the section keeps its height */
@media (max-width: 40rem) {
  .steps__list li::before { grid-row: 1; }
  .steps__list li > h3, .steps__list li > p { grid-column: 2; }
  .steps__list li > p { grid-row: 2; }
  .steps__list .gauge { grid-column: 1; grid-row: 2; align-self: start; gap: 4px; margin-top: var(--space-xs); }
  .steps__list .gauge i { height: 5px; }
}