/* FaceIT.Web — global stylesheet
   Author      : Philippe Ryf — assisted by Hermes web-coder
   Created     : 2026-10-14
   Revisions   : 2026-10-14 initial (design tokens, base layout, dark scheme)
                 2026-10-14 nine sections, cards, accordion, form, self-hosted fonts
                 2026-10-14 one colour per practice, and hover/focus motion
                 2026-10-14 smooth in-page scrolling, and the room the sticky header takes
                            from whatever a fragment link scrolls to
   Notes       : Tokens carry the Face-IT Solutions house charter, whose text colours
                 were measured against WCAG 2.2 AA (contrast ratio in the comment).
                 Decorative tokens (--rule, --accent-tint) are never used to carry text.
                 The two typefaces are subsetted to Latin and served from this origin:
                 no request ever leaves for a font service, which the content security
                 policy of the production host will enforce anyway.
                 No layout uses a fixed width: every grid track is 1fr or minmax(), so a
                 narrow screen reflows instead of scrolling sideways.
   Licence     : proprietary — Face-IT Solutions */

@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: "JetBrains Mono";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/fonts/JetBrainsMono-Regular.woff2") format("woff2");
}

:root {
    /* Brand charter — every ratio below is measured against the worst surface the
       colour may sit on (--surface, --surface-alt or --accent-tint). WCAG 2.2 AA. */
    --ink: #1f2a37;           /* 14.54:1 — body text */
    --ink-soft: #384152;      /* 10.26:1 — secondary headings, lede */
    --muted: #4b5563;         /*  7.56:1 (6.62:1 on the tint) — small print */
    --accent: #0b5fa5;        /*  6.57:1 — links, primary button */
    --accent-strong: #084a80; /*  9.12:1 — hover and active states */
    --on-accent: #ffffff;      /*  6.57:1 on --accent — the text colour that goes ON the accent */
    --accent-tint: #e9f1f8;   /* decorative background — text on it uses --ink, --ink-soft or --accent */
    --ok: #1e6f50;            /*  6.10:1 */
    --warn: #9a5b00;          /*  5.43:1 */

    /* Brand palette (the logo). Identity colours: never used for text. */
    /* Identity palette: one colour per practice, in the charter order — assistance,
       formation, conseil, etude. Measured, not chosen by eye: the four blocks are read
       against their own surface, which is why the dark themes below carry their own values
       (two of these four fall under 3:1 on #10151c). */
    --fit-bleu: #152f9c;       /* assistance — 10.95:1 on white */
    --fit-bleu-clair: #0d8f86; /* formation — 3.97:1 on white */
    --fit-or: #f5a524;         /* conseil — 2.04:1 on white: the mark and nothing else */
    --fit-rouge: #b3286a;      /* etude — 6.13:1 on white */
    /* The cross of the mark: white in all four themes. It is drawn on the coloured blocks,
       never on the page background, so it stays white even on a white surface. */
    --fit-croix: #ffffff;

    /* The four practices, as colours. Decorative tokens: they carry the 4px top border of a
       card or a section, a dot beside its heading and a hover tint, never body copy. */
    --pole-1: #152f9c;         /* assistance */
    --pole-2: #0d8f86;         /* formation */
    --pole-3: #f5a524;         /* conseil — the one pole colour that may not be text on white */
    --pole-4: #b3286a;         /* etude */

    /* The gold as text. #f5a524 reads 2.04:1 on white, so a label that has to be read uses
       one of these two: the dark gold on a light theme, the light gold on a dark one. */
    --pole-3-texte: #8a5200;       /* 6.39:1 on white */
    --pole-3-texte-clair: #f7b944; /* 10.45:1 on #10151c */

    /* The hover tints, one explicit rgba() per pole: 7 to 8% of the pole colour on a light
       surface, which is the "very light" the charter asks for. The two dark themes redeclare
       these four, because a 7% layer of anything on #10151c measures under 1.1:1 and would
       not be seen. Written by hand, never mixed with color-mix(), so that the four themes
       stay predictable. */
    --pole-1-tint: rgba(21, 47, 156, 0.07);
    --pole-2-tint: rgba(13, 143, 134, 0.07);
    --pole-3-tint: rgba(245, 165, 36, 0.08);
    --pole-4-tint: rgba(179, 40, 106, 0.07);

    /* Surfaces */
    --surface: #ffffff;
    --surface-alt: #f5f7fa;

    /* --rule is a purely decorative separator and may sit below 3:1. Any border that
       carries meaning (field outline, table delimiter, active tab) uses --rule-strong,
       which stays above the 3:1 that WCAG 1.4.11 requires for non-text contrast. */
    --rule: #d5dde5;
    --rule-strong: #6b7280;   /* 4.83:1 on --surface, 4.50:1 on --surface-alt */

    --radius: 6px;
    --wrap: 68rem;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 1rem;
    --space-4: 1.5rem;
    --space-5: 2.5rem;
    --space-6: 4rem;

    --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    /* The smallest step of the scale. It was 0.875rem (14 px) and a reader on a 24-inch
       screen said the four practice cards were "a bit small" and "slightly blurry": 14 px is
       one size below what this site promises to be readable at, and it is what made the
       promise untrue. 1rem is the floor of the running text — every paragraph, claim, hint
       and card body a visitor reads. The chrome of the header and of the footer keeps its own
       compact sizes (13 to 15 px on a phone), which is a separate decision: those labels
       share a 342 px row at 390 px, and measured there, one size up wraps the row. */
    --step--1: 1rem;
    --step-0: 1.0625rem;
    --step-1: 1.25rem;
    --step-2: 1.5rem;
    --step-3: 2rem;
    --step-4: clamp(2.25rem, 1.5rem + 2.5vw, 3rem);
}

@media (prefers-color-scheme: dark) {
    /* Honours the operating-system setting: a dark scheme is an accessibility aid for
       light-sensitive visitors, and it replaces the broken "Mode sombre" button of the
       WordPress site. Ratios measured on --surface (#10151c): ink 15.72:1, ink-soft
       12.34:1, muted 8.33:1, accent 8.64:1, accent-strong 11.42:1. */
    :root:not([data-theme]) {
        --ink: #e9eef5;
        --ink-soft: #cbd5e1;
        --muted: #a5b0bd;        /*  8.33:1 — keeps the small print readable */
        --accent: #7cb8ea;
        --accent-strong: #a8d1f4;
        --on-accent: #0b1119;     /*  8.93:1 — white on this accent is 2.12:1, unreadable */
        --accent-tint: #16273a;
        --ok: #6ed0a4;
        --warn: #e0b062;
        /* The four poles on a dark surface. #152f9c reads 1.67:1 here and #b3286a 2.99:1:
           these are the lightened values measured for #10151c, not a second palette. The
           brand tokens carry the same four, since the mark is drawn in these colours. */
        --fit-bleu: #485db2;
        --fit-bleu-clair: #2ab5a4;
        --fit-or: #f7b944;
        --fit-rouge: #d35c8d;
        --fit-croix: #ffffff;
        --pole-1: #485db2;
        --pole-2: #2ab5a4;
        --pole-3: #f7b944;
        --pole-4: #d35c8d;
        --pole-3-texte: #f7b944;
        --pole-1-tint: rgba(72, 93, 178, 0.22);
        --pole-2-tint: rgba(42, 181, 164, 0.18);
        --pole-3-tint: rgba(247, 185, 68, 0.16);
        --pole-4-tint: rgba(211, 92, 141, 0.22);
        --surface: #10151c;
        --surface-alt: #161c25;
        --rule: #2a3441;
        --rule-strong: #77899e; /* 5.11:1 on --surface, 4.77:1 on --surface-alt */
    }
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    /* A sticky header covers the first rows of whatever a fragment link scrolls to. The
       padding is what stops "Contact" from landing under the header, where the visitor
       sees a heading they cannot read. Measured header heights: 140 px on a wide screen,
       208 px between 768 px and 1216 px (the header wraps onto two rows there), 213 px at
       360 px and 390 px, 268 px at 320 px. It also applies to the top and bottom anchors
       of the fixed control: their move is clamped at the two ends of the document, so the
       offsets cost nothing there. */
    scroll-padding-block-start: 9.5rem;
}

/* An in-page move is a movement, so it is offered to the visitor who did not ask for
   less of it. Reduced motion turns it off in the same breath: the jump still happens,
   it just does not travel. */
@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

@media (max-width: 75.99rem) {
    html {
        scroll-padding-block-start: 13.5rem;
    }
}

@media (max-width: 47.99rem) {
    html {
        /* The phone header is taller, and so is what it hides. */
        scroll-padding-block-start: 14rem;
    }
}

body {
    margin: 0;
    background: var(--surface);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: var(--step-0);
    /* Whole pixels, not a ratio: 17 px at 1.6 lands the line box on 27.2 px, and a text
       baseline that sits between two device pixels is one of the reasons a page reads as
       "slightly blurry" on a 1:1 screen. 1.75rem is 28 px at every size in this scale. */
    line-height: 1.75rem;
    overflow-wrap: break-word;
}

.wrap {
    width: 100%;
    max-width: var(--wrap);
    margin-inline: auto;
    /* Centred, but on a whole pixel. On a 1920 px screen with the usual 15 px scrollbar the
       layout viewport is 1905 px wide: the container is then 408.5 px from the left edge and
       every glyph of the page is drawn half a pixel off the device grid — which, on a 1:1
       screen, is exactly the "slightly blurry" a reader reported. round() snaps the offset;
       the line above stays as the fallback for a browser without round(). */
    margin-inline: max(0px, calc(round(nearest, (100% - var(--wrap)) / 2, 1px)));
    padding-inline: var(--space-4);
}

a {
    color: var(--accent);
    text-underline-offset: 0.2em;
}

a:hover {
    color: var(--accent-strong);
}

/* A visible focus ring everywhere: the site must be usable without a mouse. */
:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--space-1);
}

#content:focus {
    outline: none;
}

.skip-link {
    position: absolute;
    left: var(--space-3);
    top: -4rem;
    z-index: 10;
    display: inline-flex;
    align-items: center;
    min-block-size: 2.75rem;
    padding: var(--space-2) var(--space-3);
    background: var(--accent);
    color: var(--on-accent);
    border-radius: var(--radius);
    transition: top 120ms ease-out;
}

.skip-link:focus {
    top: var(--space-3);
}

h1 {
    font-size: var(--step-4);
    line-height: 3.5rem;
    margin-block: 0 var(--space-3);
    letter-spacing: -0.01em;
}

h2 {
    font-size: var(--step-3);
    line-height: 2.5rem;
    margin-block: 0 var(--space-2);
    letter-spacing: -0.01em;
}

h3 {
    font-size: var(--step-1);
    line-height: 1.625rem;
    margin-block: 0 var(--space-2);
}

p {
    margin-block: 0 var(--space-3);
    max-width: 68ch;
}

ul,
ol {
    max-width: 68ch;
}

/* Sections --------------------------------------------------------------------- */

.section {
    padding-block: var(--space-5);
    border-top: 1px solid var(--rule);
}

.section--tint {
    background: var(--surface-alt);
    margin-inline: calc(-1 * var(--space-4));
    padding-inline: var(--space-4);
    border-top-color: transparent;
    border-bottom: 1px solid var(--rule);
}

.section-lede {
    font-size: var(--step-1);
    color: var(--ink-soft);
}

.note {
    font-size: var(--step--1);
    color: var(--muted);
}

/* Hero ------------------------------------------------------------------------ */

.hero {
    padding-block: var(--space-6) var(--space-5);
}

.eyebrow {
    margin-block: 0 var(--space-2);
    font-size: var(--step--1);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
}

.lede {
    font-size: var(--step-1);
    color: var(--ink-soft);
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-block: var(--space-4) var(--space-4);
}

.proofs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--step--1);
    color: var(--muted);
}

.proofs li::before {
    content: "—";
    margin-right: var(--space-2);
    color: var(--rule-strong);
}

/* Buttons --------------------------------------------------------------------- */

.button {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    padding: var(--space-2) var(--space-4);
    background: var(--accent);
    color: var(--on-accent);
    border: 2px solid var(--accent);
    border-radius: var(--radius);
    font-weight: 600;
    text-decoration: none;
}

.button:hover {
    background: var(--accent-strong);
    border-color: var(--accent-strong);
    color: var(--on-accent);
}

.button--quiet {
    background: transparent;
    color: var(--accent);
}

.button--quiet:hover {
    background: var(--accent-tint);
    color: var(--accent-strong);
    border-color: var(--accent-strong);
}

.button[disabled] {
    background: var(--surface-alt);
    border-color: var(--rule-strong);
    color: var(--muted);
    cursor: not-allowed;
}

/* Cards ----------------------------------------------------------------------- */

.cards {
    display: grid;
    gap: var(--space-4);
    margin: var(--space-4) 0 0;
    padding: 0;
    list-style: none;
    grid-template-columns: 1fr;
    max-width: none;
}

@media (min-width: 40rem) {
    .cards--poles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cards--paths {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.card {
    padding: var(--space-4);
    background: var(--surface);
    /* A card is a block the visitor identifies at a glance: this outline carries meaning,
       so it uses the grey that reaches 4.83:1 rather than the decorative one at 1.4:1. */
    border: 1px solid var(--rule-strong);
    border-top: 4px solid var(--accent);
    border-radius: var(--radius);
}

.card-claim {
    font-weight: 600;
    color: var(--accent);
    margin-block: 0 var(--space-2);
}

.card-body {
    margin: 0;
    font-size: var(--step--1);
    color: var(--ink-soft);
}

.card--path .facts {
    margin-block-end: var(--space-3);
}

.price {
    margin: 0;
    padding-top: var(--space-2);
    border-top: 1px solid var(--rule);
    font-weight: 600;
    color: var(--ok);
}

/* Definition lists used as fact strips --------------------------------------- */

.facts {
    margin: 0;
}

.facts dt {
    font-size: var(--step--1);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
}

.facts dd {
    margin: 0 0 var(--space-2);
}

/* Checked lists -------------------------------------------------------------- */

.checks {
    margin: var(--space-3) 0 var(--space-4);
    padding: 0;
    list-style: none;
}

.checks li {
    position: relative;
    padding-left: var(--space-4);
    margin-bottom: var(--space-2);
}

.checks li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 0.5rem;
    height: 0.5rem;
    background: var(--ok);
    border-radius: 50%;
}

/* Callouts ------------------------------------------------------------------- */

.callout {
    margin-block: var(--space-4);
    padding: var(--space-4);
    background: var(--accent-tint);
    border-left: 4px solid var(--accent);
    border-radius: var(--radius);
}

.callout h3 {
    margin-block-start: 0;
}

.callout p:last-child {
    margin-bottom: 0;
}

.callout--proof {
    background: transparent;
    border-left: 4px solid var(--ok);
    font-weight: 600;
    color: var(--ok);
}

.callout--attention {
    background: var(--surface-alt);
    border-left: 4px solid var(--warn);
}

.errors {
    margin: 0;
    padding-inline-start: var(--space-4);
}

/* The trap field: moved off screen rather than hidden with display:none, because a script
   that fills every input must still reach it, while no human and no screen reader ever
   meets it — it is out of the tab order and out of the accessibility tree. */
.field--trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Method steps --------------------------------------------------------------- */

.steps {
    display: grid;
    gap: var(--space-3);
    margin: var(--space-4) 0;
    padding: 0;
    list-style: none;
    counter-reset: none;
    grid-template-columns: 1fr;
    max-width: none;
}

@media (min-width: 48rem) {
    .steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.steps li {
    padding: var(--space-3);
    border-left: 2px solid var(--rule-strong);
}

.steps h3 {
    margin-block: 0 var(--space-1);
    font-size: var(--step-0);
    color: var(--accent);
}

.steps p {
    margin-block: 0 var(--space-1);
    font-size: var(--step--1);
}

.step-who {
    color: var(--muted);
}

/* FAQ: a real accordion without JavaScript ---------------------------------- */

.faq-entry {
    border-bottom: 1px solid var(--rule-strong);
}

/* Blazor's enhanced navigation moves focus to the first h1 after an in-page link,
   which is the right thing for a screen reader but paints the focus ring around a
   heading that no keyboard user can reach. The ring is therefore dropped on the
   heading only; every interactive element keeps the ring defined above. */
h1:focus {
    outline: none;
}

.faq-entry summary {
    /* list-item, not flex: only the native display keeps the browser's disclosure
       marker, which is the affordance telling the visitor the answer opens. */
    display: list-item;
    list-style-position: inside;
    min-height: 2.75rem;
    padding-block: var(--space-2);
    font-weight: 600;
    cursor: pointer;
}

.faq-entry summary:hover {
    color: var(--accent);
}

.faq-entry p {
    margin-block: 0 var(--space-3);
    color: var(--ink-soft);
}

/* Contact ------------------------------------------------------------------- */

.contact-grid {
    display: grid;
    gap: var(--space-5);
    grid-template-columns: 1fr;
    margin-block-start: var(--space-4);
}

@media (min-width: 56rem) {
    .contact-grid {
        grid-template-columns: 1.4fr 1fr;
    }
}

.field {
    margin-block: 0 var(--space-3);
}

.field label {
    display: block;
    font-weight: 600;
    margin-bottom: var(--space-1);
}

.field-hint {
    font-weight: 400;
    color: var(--muted);
}

.field input,
.field select,
.field textarea {
    width: 100%;
    min-height: 2.75rem;
    padding: var(--space-2);
    font: inherit;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius);
}

.field textarea {
    resize: vertical;
}

.field--check {
    display: flex;
    gap: var(--space-2);
    align-items: flex-start;
}

.field--check input {
    width: auto;
    min-height: 0;
    margin-top: 0.35rem;
}

.field--check label {
    font-weight: 400;
    margin: 0;
}

/* The subject, and the questions that belong to it ---------------------------
   The subject is a row of radios dressed as the chips of the AI line of a practice card:
   the input itself is transparent, out of the flow, and still focusable and still
   announced, while the chip beside it is its visible label. The questions of a subject
   are shown and hidden by this stylesheet alone — no script, no event handler — so the
   form behaves exactly the same with JavaScript disabled. A field hidden here is never
   required: what the browser cannot fill may not block the submission, and the rule that
   decides which answers are kept lives on the server (RequestSubmission.ExtraGroups). */

.subject-choice {
    margin-block: 0 var(--space-3);
    padding: 0;
    border: 0;
}

.subject-choice > legend {
    padding: 0;
    margin-bottom: var(--space-1);
    font-weight: 600;
}

.subject-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    position: relative;
}

/* Transparent rather than hidden: the radio keeps its place in the tab order and in the
   accessibility tree, and the browser still anchors its validation message here. */
.subject-chips input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.chip--choice {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    padding: 0.25rem var(--space-3);
    border: 1px solid var(--rule-strong);
    cursor: pointer;
}

/* The platform draws the focus ring around the radio, which nobody can see: the ring is
   drawn around the chip instead, with the same one as every other control of the site. */
.subject-chips input[type="radio"]:focus-visible + .chip--choice {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
}

.subject-chips input[type="radio"]:checked + .chip--choice {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent);
}

/* The pointer answers in colour only: nothing moves under it. */
.subject-chips input[type="radio"]:not(:checked) + .chip--choice:hover {
    border-color: var(--accent);
    color: var(--accent-strong);
}

.subject-extra {
    margin-block-start: var(--space-2);
    padding: var(--space-3) var(--space-3) 0;
    background: var(--surface-alt);
    border: 0;
    border-inline-start: 3px solid var(--rule-strong);
    border-radius: var(--radius);
}

.subject-extra > legend {
    padding: 0;
    font-size: var(--step--1);
    font-weight: 600;
    color: var(--ink-soft);
}

/* The reveal, and the rule that hides what is not shown, live inside this block on
   purpose. A browser that cannot ask whether a radio is checked — no support for :has() —
   never applies either, so it offers every group instead of hiding a question the
   visitor might need. Showing three questions too many is a nuisance; hiding the one
   question somebody came to answer loses the enquiry. */
@supports selector(:has(*)) {
    .contact-form .subject-extra {
        display: none;
    }

    .contact-form .subject-choice:has(#contact-subject-assistance:checked) .only-assistance,
    .contact-form .subject-choice:has(#contact-subject-formation:checked) .only-formation,
    .contact-form .subject-choice:has(#contact-subject-conseil:checked) .only-conseil,
    .contact-form .subject-choice:has(#contact-subject-developpement:checked) .only-developpement,
    .contact-form .subject-choice:has(#contact-subject-web:checked) .only-web,
    .contact-form .subject-choice:has(#contact-subject-autre:checked) .only-autre {
        display: block;
    }
}

.contact-details {
    padding: var(--space-4);
    background: var(--surface-alt);
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius);
    align-self: start;
}

.response {
    margin: 0;
    font-weight: 600;
    color: var(--ok);
}

.notice {
    padding-block: var(--space-6);
}

/* The AI line of each practice. The chip is a label, not an image: it carries text and
   keeps the AA contrast of the accent colour on its own tint. */
.card-ai {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-2);
    margin-block: var(--space-3) 0;
    font-size: var(--step--1);
    color: var(--ink-soft);
}

.chip {
    flex: 0 0 auto;
    padding: 0.125rem var(--space-2);
    background: var(--accent-tint);
    color: var(--accent);
    border-radius: 999px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ---- Explicit theme choices ---------------------------------------------------
   The blocks above follow the operating system. These follow the visitor, who picks
   a theme with the switch in the footer: the cookie is read on the server, so the
   palette is already right in the first byte of the answer. Nothing flashes, and no
   script runs. The dark palette is written twice on purpose — once inside the media
   query for the automatic case, once here for the explicit choice, because a media
   query cannot take part in a selector list.                                     */

:root[data-theme="light"] {
    --fit-croix: #ffffff;
    --ink: #1f2a37;
    --ink-soft: #384152;
    --muted: #4b5563;
    --accent: #0b5fa5;
    --accent-strong: #084a80;
    --on-accent: #ffffff;
    --accent-tint: #e9f1f8;
    --ok: #1e6f50;
    --warn: #9a5b00;
    --surface: #ffffff;
    --surface-alt: #f5f7fa;
    --rule: #d5dde5;
    --rule-strong: #6b7280;
}

:root[data-theme="dark"] {
    --fit-croix: #ffffff;
    /* The four poles on a dark surface. #152f9c reads 1.67:1 here and #b3286a 2.99:1:
       these are the lightened values measured for a dark background, not a second palette.
       The brand tokens carry the same four, since the mark is drawn in these colours. */
    --fit-bleu: #485db2;
    --fit-bleu-clair: #2ab5a4;
    --fit-or: #f7b944;
    --fit-rouge: #d35c8d;
    --pole-1: #485db2;
    --pole-2: #2ab5a4;
    --pole-3: #f7b944;
    --pole-4: #d35c8d;
    --pole-3-texte: #f7b944;
    --pole-1-tint: rgba(72, 93, 178, 0.22);
    --pole-2-tint: rgba(42, 181, 164, 0.18);
    --pole-3-tint: rgba(247, 185, 68, 0.16);
    --pole-4-tint: rgba(211, 92, 141, 0.22);
    --ink: #e9eef5;
    --ink-soft: #cbd5e1;
    --muted: #a5b0bd;
    --accent: #7cb8ea;
    --accent-strong: #a8d1f4;
    --on-accent: #0b1119;
    --accent-tint: #16273a;
    --ok: #6ed0a4;
    --warn: #e0b062;
    --surface: #10151c;
    --surface-alt: #161c25;
    --rule: #2a3441;
    --rule-strong: #77899e;
}

/* High contrast: black on white, white on black, no tint, no reliance on a hue.
   Measured: ink 21.00:1, muted 16.48:1 (light) / 16.83:1 (dark), accent 9.80:1
   (light) / 13.56:1 (dark), --on-accent 9.80:1 and 13.56:1 on the accent. */
:root[data-theme="light-hc"] {
    --fit-croix: #ffffff;
    /* In a high-contrast theme colour may not carry meaning, so the four poles share the ink
       of the theme and no tint is drawn: the heading text of a card or a section says which
       pole it is. The pole text colour follows the ink as well, or the gold would be read at
       2.04:1 on this surface. */
    --pole-1: #000000;
    --pole-2: #000000;
    --pole-3: #000000;
    --pole-4: #000000;
    --pole-3-texte: #000000;
    --pole-1-tint: transparent;
    --pole-2-tint: transparent;
    --pole-3-tint: transparent;
    --pole-4-tint: transparent;
    --ink: #000000;
    --ink-soft: #000000;
    --muted: #1f1f1f;
    --accent: #00457c;
    --accent-strong: #002f55;
    --on-accent: #ffffff;
    --accent-tint: #ffffff;
    --ok: #0a5132;
    --warn: #6b3d00;
    --surface: #ffffff;
    --surface-alt: #ffffff;
    --rule: #000000;
    --rule-strong: #000000;
}

:root[data-theme="dark-hc"] {
    --fit-croix: #ffffff;
    /* The four poles on a black surface: the lightened values, as in the dark theme, because
       the mark is drawn in these colours and two of the base four would vanish here. The pole
       accents themselves are white: in a high-contrast theme colour may not carry meaning,
       and no tint is drawn. */
    --fit-bleu: #485db2;
    --fit-bleu-clair: #2ab5a4;
    --fit-or: #f7b944;
    --fit-rouge: #d35c8d;
    --pole-1: #ffffff;
    --pole-2: #ffffff;
    --pole-3: #ffffff;
    --pole-4: #ffffff;
    --pole-3-texte: #ffffff;
    --pole-1-tint: transparent;
    --pole-2-tint: transparent;
    --pole-3-tint: transparent;
    --pole-4-tint: transparent;
    --ink: #ffffff;
    --ink-soft: #ffffff;
    --muted: #e6e6e6;
    --accent: #9bd7ff;
    --accent-strong: #c7e9ff;
    --on-accent: #000000;
    --accent-tint: #000000;
    --ok: #7be0b0;
    --warn: #f0c070;
    --surface: #000000;
    --surface-alt: #000000;
    --rule: #ffffff;
    --rule-strong: #ffffff;
}

/* High contrast is more than a palette: nothing may be carried by colour alone
   (WCAG 1.4.1), so links are underlined, the bands that relied on a tint get a real
   frame, the blocks that matter are outlined twice as thick, and the focus ring is
   doubled so it stays visible on any background. */
:root[data-theme="light-hc"] a,
:root[data-theme="dark-hc"] a {
    text-decoration: underline;
}

:root[data-theme="light-hc"] .section--tint,
:root[data-theme="dark-hc"] .section--tint {
    border-block: 2px solid var(--rule);
}

:root[data-theme="light-hc"] .card,
:root[data-theme="dark-hc"] .card,
:root[data-theme="light-hc"] .callout,
:root[data-theme="dark-hc"] .callout,
:root[data-theme="light-hc"] .faq-entry,
:root[data-theme="dark-hc"] .faq-entry,
:root[data-theme="light-hc"] .field input,
:root[data-theme="dark-hc"] .field input,
:root[data-theme="light-hc"] .field select,
:root[data-theme="dark-hc"] .field select,
:root[data-theme="light-hc"] .field textarea,
:root[data-theme="dark-hc"] .field textarea {
    border: 2px solid var(--rule-strong);
}

:root[data-theme="light-hc"] :focus-visible,
:root[data-theme="dark-hc"] :focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 3px;
    box-shadow: 0 0 0 6px var(--surface);
}

/* The heading keeps its exception here too: enhanced navigation focuses it after an
   in-page link, and the ring then frames a title no keyboard user can reach. This rule
   has to come after the one above, which is more specific than the plain h1:focus. */
:root[data-theme="light-hc"] h1:focus,
:root[data-theme="dark-hc"] h1:focus {
    outline: none;
    box-shadow: none;
}

/* Theme switch in the footer bar ------------------------------------------------- */

.theme-switch {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    margin: 0;
}

.theme-switch button {
    font: inherit;
    font-size: var(--step--1);
    min-height: 2.75rem;      /* 44 px: a thumb has to be able to hit it */
    padding-inline: var(--space-2);
    background: transparent;
    color: var(--ink);
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius);
    cursor: pointer;
}

.theme-switch button:hover {
    color: var(--accent);
    border-color: var(--accent);
}

.theme-switch button[aria-current="true"] {
    background: var(--accent);
    color: var(--on-accent);
    border-color: var(--accent);
    font-weight: 600;
}

/* ── The four practices in detail ─────────────────────────────────────────────────────────── */

.detail-head .lede {
    max-width: 62ch;
}

.toc {
    margin-top: var(--space-4);
}

.toc-label {
    margin: 0 0 var(--space-2);
    font-weight: 600;
    color: var(--muted);
}

.toc ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* A chip-like link: it reads as a button the eye can hit, but it is a plain document link. */
.toc a {
    display: inline-block;
    padding: 0.4rem 0.9rem;
    border: 1px solid var(--rule-strong);
    border-radius: 999px;
    text-decoration: none;
    font-weight: 600;
}

.toc a:hover,
.toc a:focus-visible {
    border-color: var(--accent);
    color: var(--accent);
}

.practice {
    border-top: 1px solid var(--rule);
}

.practice .card-claim {
    margin-top: var(--space-2);
}

.practice-blocks {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    margin: var(--space-4) 0;
}

.practice-block h3 {
    margin: 0 0 var(--space-2);
    font-size: var(--step-0);
    letter-spacing: 0.01em;
}

.includes {
    margin: 0;
    padding-left: 1.1rem;
}

.includes li {
    margin-bottom: var(--space-1);
}

.practice-cta {
    margin-top: var(--space-4);
}

.card-more {
    margin-top: var(--space-3);
    font-weight: 600;
}

.detail-foot {
    text-align: center;
}

/* ── The four practices: one pole colour each ───────────────────────────────────────────────
   Recall, not flood. The colour of a pole appears on three things and nowhere else: the 4px
   top border of its card or its section, a dot beside its heading, and a very light tint that
   shows only while the pointer is over the block or the keyboard is inside it. Body copy keeps
   the colours it already has. The one pole label this stylesheet colours is the claim line of
   the conseil pole, and it uses --pole-3-texte: #f5a524 reads 2.04:1 on white and may not be
   text there. */

/* The dot, at the same key as the bullets of a checked list. One geometry for all eight
   headings; the colour of the pole comes from the rules further down. */
.card.pole-1 > h3::before,
.card.pole-2 > h3::before,
.card.pole-3 > h3::before,
.card.pole-4 > h3::before,
.practice.pole-1 > h2::before,
.practice.pole-2 > h2::before,
.practice.pole-3 > h2::before,
.practice.pole-4 > h2::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.45em;
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
}

/* The heading makes room for it. */
.card.pole-1 > h3,
.card.pole-2 > h3,
.card.pole-3 > h3,
.card.pole-4 > h3,
.practice.pole-1 > h2,
.practice.pole-2 > h2,
.practice.pole-3 > h2,
.practice.pole-4 > h2 {
    position: relative;
    padding-left: 1.15rem;
}

/* A section of the detail page is held apart by a hairline: on a pole that hairline becomes
   the same 4px mark a card carries. */
.practice.pole-1,
.practice.pole-2,
.practice.pole-3,
.practice.pole-4 {
    border-top-width: 4px;
}

/* 1 — assistance */
.card.pole-1,
.practice.pole-1 {
    border-top-color: var(--pole-1);
}

.card.pole-1 > h3::before,
.practice.pole-1 > h2::before {
    background: var(--pole-1);
}

.card.pole-1:hover,
.card.pole-1:focus-within,
.practice.pole-1:hover,
.practice.pole-1:focus-within {
    background-color: var(--pole-1-tint);
}

/* 2 — formation */
.card.pole-2,
.practice.pole-2 {
    border-top-color: var(--pole-2);
}

.card.pole-2 > h3::before,
.practice.pole-2 > h2::before {
    background: var(--pole-2);
}

.card.pole-2:hover,
.card.pole-2:focus-within,
.practice.pole-2:hover,
.practice.pole-2:focus-within {
    background-color: var(--pole-2-tint);
}

/* 3 — conseil */
.card.pole-3,
.practice.pole-3 {
    border-top-color: var(--pole-3);
}

.card.pole-3 > h3::before,
.practice.pole-3 > h2::before {
    background: var(--pole-3);
}

.card.pole-3:hover,
.card.pole-3:focus-within,
.practice.pole-3:hover,
.practice.pole-3:focus-within {
    background-color: var(--pole-3-tint);
}

/* The claim line of the conseil pole: the only text that takes the colour of its own pole,
   and it takes the text variant of the gold. */
.card.pole-3 .card-claim,
.practice.pole-3 .card-claim {
    color: var(--pole-3-texte);
}

/* 4 — etude */
.card.pole-4,
.practice.pole-4 {
    border-top-color: var(--pole-4);
}

.card.pole-4 > h3::before,
.practice.pole-4 > h2::before {
    background: var(--pole-4);
}

.card.pole-4:hover,
.card.pole-4:focus-within,
.practice.pole-4:hover,
.practice.pole-4:focus-within {
    background-color: var(--pole-4-tint);
}

/* ── Motion: four gestures, on hover and on focus ────────────────────────────────────────────
   A block lifts 2px and takes the tint of its pole, a link draws its own underline, a button
   turns a shade brighter, the "see the detail" link steps 4px to the right. Nothing else: no
   scale, no bounce, no parallax, no animation running on its own, and no script anywhere.
   Every gesture the pointer is given, the keyboard is given too: the blocks answer
   :focus-within, the links and buttons answer :focus-visible. */

/* Blocks. The tint a pole card or a pole section reveals is declared with its own pole above. */
.card,
.practice {
    transition: border-color 140ms cubic-bezier(.2,.7,.3,1),
                background-color 140ms cubic-bezier(.2,.7,.3,1),
                transform 140ms cubic-bezier(.2,.7,.3,1);
}

.card:hover,
.card:focus-within,
.practice:hover,
.practice:focus-within {
    transform: translateY(-2px);
}

/* In-content links: an underline that grows from the left. It is drawn as a background line
   rather than with text-decoration, which cannot be animated from nothing to full width
   without a script. The static underline is dropped here for a measured reason: with the 0.2em
   offset in force it lands on the very spot the drawn line reaches, so the growth would never
   be seen. The two high-contrast themes keep their underline — the rule they set is more
   specific than this one, and there colour may not be the only cue. */
main a:not(.button) {
    text-decoration: none;
    background-image: linear-gradient(currentColor, currentColor);
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0% 1px;
    transition: background-size 160ms cubic-bezier(.2,.7,.3,1);
}

main a:not(.button):hover,
main a:not(.button):focus-visible {
    background-size: 100% 1px;
}

/* The "see the detail" link of a card: inline-block, because a transform has no effect on an
   inline box. Its two transitions are declared together, or the second would drop the first. */
main .card-more a {
    display: inline-block;
    transition: background-size 160ms cubic-bezier(.2,.7,.3,1),
                transform 140ms cubic-bezier(.2,.7,.3,1);
}

.card:hover .card-more a,
.card:focus-within .card-more a {
    transform: translateX(4px);
}

/* Navigation links: the same drawn line, 2px thick and in the accent colour, under the header
   navigation, the footer navigation and the table of contents. The static underline those
   links carry is dropped in the same breath: it would run in parallel with the line the
   visitor has just watched grow. */
header nav a:not(.button),
footer nav a:not(.button),
main nav a:not(.button) {
    text-decoration: none;
    background-image: linear-gradient(var(--accent), var(--accent));
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0% 2px;
    transition: background-size 160ms cubic-bezier(.2,.7,.3,1);
}

header nav a:not(.button):hover,
header nav a:not(.button):focus-visible,
footer nav a:not(.button):hover,
footer nav a:not(.button):focus-visible,
main nav a:not(.button):hover,
main nav a:not(.button):focus-visible {
    background-size: 100% 2px;
}

/* The layout draws its own underline under a navigation link on hover. The extra class in this
   selector excludes nothing: it only outweighs the attribute selector Blazor appends to the
   scoped rule, so that one line, not two, appears under the link being pointed at. */
header nav.site-nav a:not(.button):hover,
header nav.site-nav a:not(.button):focus-visible {
    text-decoration: none;
}

/* Primary buttons: a shade brighter, with a soft shadow. The box itself never moves. */
.button {
    transition: filter 140ms cubic-bezier(.2,.7,.3,1),
                box-shadow 140ms cubic-bezier(.2,.7,.3,1);
}

.button:hover,
.button:focus-visible {
    filter: brightness(1.05);
    box-shadow: 0 2px 10px rgb(0 0 0 / .12);
}

/* The visitor who asked for reduced motion. The tint, the colour, the drawn line and the
   brighter button stay: they answer the pointer without moving. The transitions go, and with
   them the two displacements — the 2px lift and the 4px step — which a transition of nearly
   no duration would still perform in one jump. */
@media (prefers-reduced-motion: reduce) {
    .card,
    .practice,
    .card-more a,
    main a:not(.button),
    main .card-more a,
    header nav a:not(.button),
    footer nav a:not(.button),
    main nav a:not(.button),
    .button {
        transition: none !important;
    }

    .card:hover,
    .card:focus-within,
    .practice:hover,
    .practice:focus-within,
    .card:hover .card-more a,
    .card:focus-within .card-more a {
        transform: none !important;
    }
}