/*
 * AnnuaireObs — site stylesheet.
 *
 * Sources the design token system from DESIGN.md frontmatter as CSS custom
 * properties on :root. Story 1.3 ships the tokens, typography, grid, layout
 * shell, components scaffold, and the print stylesheet. Later stories add
 * component-specific styles (medallions, infobox, comparator, etc.).
 *
 * Token naming: --color-*, --typography-* (as composite), --space-*, --rounded-*.
 * BEM-light for components: .block__element--modifier.
 *
 * Light theme only in v1. Dark mode is explicitly out of scope.
 */

/* =============================================================================
   1. Design tokens
   ============================================================================= */

:root {
    /* --- Colors: surfaces (450.fm neutral white + light greys) --------- */
    --color-surface: #FFFFFF;
    --color-surface-warm: #F4F4F4;
    --color-surface-container: #EEEEEE;
    --color-surface-container-high: #DDDDDD;

    --color-outline: #DDDDDD;
    --color-outline-soft: #EEEEEE;

    /* --- Colors: ink ---------------------------------------------------- */
    --color-on-surface: #222222;
    --color-on-surface-muted: #555555;
    --color-on-surface-faint: #888888;

    /* --- Colors: primary (450.fm darker blue, used for headings / links).
       #1660a5 keeps contrast comfortably above WCAG AA on white (~5.6:1)
       so links and headings remain readable across monitors. */
    --color-primary: #1660a5;
    --color-primary-hover: #1e73be;
    --color-primary-pressed: #114e85;
    --color-on-primary: #FFFFFF;

    /* --- Colors: accent (450.fm bright theme blue).
       The bright #4db2ec is used for DECORATIVE surfaces (borders, hover
       underlines, focus rings, soft tints). For TEXT-bearing accent fills
       use --color-badge-liberal-* tokens below which pair the brand blue
       with dark text to satisfy AA. --color-on-accent is the dark navy
       used for any text rendered directly on the bright accent. */
    --color-accent: #4db2ec;
    --color-accent-hover: #6cc1ef;
    --color-accent-soft: #E5F4FC;
    --color-on-accent: #0A2740;

    /* --- Colors: links -------------------------------------------------- */
    --color-link: #1660a5;
    --color-link-hover: #1e73be;

    /* --- Colors: badges (semantically distinct; both meet AA) ----------- */
    --color-badge-regular-bg: #114e85;
    --color-badge-regular-fg: #FFFFFF;
    --color-badge-liberal-bg: #4db2ec;
    --color-badge-liberal-fg: #0A2740;
    --color-badge-neutral-bg: #F4F4F4;
    --color-badge-neutral-fg: #444444;

    /* --- Colors: semantic (450.fm palette: green / amber / red) -------- */
    --color-success: #54b747;
    --color-warning: #edcd5c;
    --color-danger: #c13e1d;
    --color-on-danger: #FFFFFF;

    /* --- Colors: focus -------------------------------------------------- */
    --color-focus-ring: #4db2ec;

    /* --- Typography: families (matches 450.fm chrome) ------------------ */
    --font-display: 'Libre Baskerville', Georgia, 'Times New Roman', serif;
    --font-body: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-longform: 'Libre Baskerville', Georgia, 'Times New Roman', serif;
    --font-mono: 'IBM Plex Mono', 'Courier New', monospace;
    --font-ui: 'Roboto', 'Open Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-chrome-display: 'Rubik', 'Open Sans', sans-serif;

    /* --- 450.fm chrome colors ------------------------------------------ */
    --color-topbar-bg: #000000;
    --color-topbar-fg: #ffffff;
    --color-header-bg: #ffffff;
    --color-header-fg: #232d35;
    --color-footer-bg: #232d35;
    --color-footer-fg: #ffffff;
    --color-footer-base-bg: #11171c;
    --color-450-accent: #4db2ec;

    /* --- Typography: composites (size/weight/line-height/letter) -------- */
    /* display-lg: 56px / 1.1 / -0.01em — desktop hero */
    --type-display-lg-size: 56px;
    --type-display-lg-line: 1.1;
    --type-display-lg-tracking: -0.01em;
    --type-display-lg-weight: 500;

    --type-display-md-size: 40px;
    --type-display-md-line: 1.15;
    --type-display-md-weight: 500;

    --type-headline-lg-size: 32px;
    --type-headline-lg-line: 1.2;
    --type-headline-lg-weight: 500;

    --type-headline-md-size: 24px;
    --type-headline-md-line: 1.25;
    --type-headline-md-weight: 500;

    --type-headline-sm-size: 20px;
    --type-headline-sm-line: 1.3;
    --type-headline-sm-weight: 500;

    --type-body-lg-size: 18px;
    --type-body-lg-line: 1.6;
    --type-body-md-size: 16px;
    --type-body-md-line: 1.6;
    --type-body-sm-size: 14px;
    --type-body-sm-line: 1.5;

    --type-longform-size: 18px;
    --type-longform-line: 1.75;

    --type-longform-lead-size: 20px;
    --type-longform-lead-line: 1.7;

    --type-label-caps-size: 12px;
    --type-label-caps-line: 1.4;
    --type-label-caps-tracking: 0.12em;
    --type-label-caps-weight: 600;

    --type-caption-size: 13px;
    --type-caption-line: 1.45;

    --type-mono-data-size: 14px;
    --type-mono-data-line: 1.4;

    /* --- Rounded -------------------------------------------------------- */
    --rounded-sm: 2px;
    --rounded-DEFAULT: 4px;
    --rounded-md: 8px;
    --rounded-lg: 12px;
    --rounded-xl: 16px;
    --rounded-full: 9999px;

    /* --- Spacing -------------------------------------------------------- */
    --space-unit: 8px;
    --space-gutter: 24px;
    --space-margin-mobile: 16px;
    --space-margin-desktop: 32px;
    --space-section-gap: 64px;
    --space-section-gap-mobile: 48px;
    --space-reading-width: 720px;
    --space-container-width: 1200px;
    --space-container-wide: 1440px;

    /* --- Component dimensions ------------------------------------------- */
    --button-padding-y: 10px;
    --button-padding-x: 20px;
    --card-padding: 24px;
    --infobox-padding: 20px;
    --field-padding: 12px;
    --field-height: 44px;

    /* --- Elevation (diffused navy-tinted shadow, hover only) ----------- */
    --shadow-hover: 0 2px 12px rgba(26, 58, 82, 0.06);

    /* --- Border -------------------------------------------------------- */
    --border-hairline: 1px solid var(--color-outline);
    --border-hairline-soft: 1px solid var(--color-outline-soft);
}

/* =============================================================================
   2. Reset and base
   ============================================================================= */

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

html {
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    margin: 0;
    background-color: var(--color-surface);
    color: var(--color-on-surface);
    font-family: var(--font-body);
    font-size: var(--type-body-md-size);
    line-height: var(--type-body-md-line);
    font-weight: 400;
}

img,
svg {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: var(--color-link);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

a:hover,
a:focus-visible {
    color: var(--color-link-hover);
}

button {
    font-family: inherit;
}

/* =============================================================================
   3. Typography utilities
   ============================================================================= */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 500;
    margin: 0 0 var(--space-unit) 0;
    color: var(--color-on-surface);
}

h1 {
    font-size: var(--type-display-md-size);
    line-height: var(--type-display-md-line);
    letter-spacing: -0.005em;
}

h2 {
    font-size: var(--type-headline-lg-size);
    line-height: var(--type-headline-lg-line);
}

h3 {
    font-size: var(--type-headline-md-size);
    line-height: var(--type-headline-md-line);
}

h4 {
    font-size: var(--type-headline-sm-size);
    line-height: var(--type-headline-sm-line);
}

p {
    margin: 0 0 var(--space-gutter) 0;
}

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

.label-caps {
    font-family: var(--font-body);
    font-size: var(--type-label-caps-size);
    line-height: var(--type-label-caps-line);
    letter-spacing: var(--type-label-caps-tracking);
    font-weight: var(--type-label-caps-weight);
    text-transform: uppercase;
    color: var(--color-on-surface-muted);
}

.caption {
    font-family: var(--font-body);
    font-size: var(--type-caption-size);
    line-height: var(--type-caption-line);
    color: var(--color-on-surface-faint);
}

.mono-data {
    font-family: var(--font-mono);
    font-size: var(--type-mono-data-size);
    line-height: var(--type-mono-data-line);
    color: var(--color-on-surface);
}

.longform {
    font-family: var(--font-longform);
    font-size: var(--type-longform-size);
    line-height: var(--type-longform-line);
    max-width: var(--space-reading-width);
    /* Story 1.3 AC: 720px reading width is centred within its parent. */
    margin-inline: auto;
}

.longform--lead {
    font-size: var(--type-longform-lead-size);
    line-height: var(--type-longform-lead-line);
    font-style: italic;
}

/* =============================================================================
   4. Layout: container, grid, reading width
   ============================================================================= */

.container {
    width: 100%;
    max-width: var(--space-container-width);
    margin: 0 auto;
    padding-left: var(--space-margin-mobile);
    padding-right: var(--space-margin-mobile);
}

.container--wide {
    max-width: var(--space-container-wide);
}

.reading-width {
    max-width: var(--space-reading-width);
    margin-left: auto;
    margin-right: auto;
}

main {
    display: block;
    min-height: 50vh;
    padding-top: var(--space-section-gap-mobile);
    padding-bottom: var(--space-section-gap-mobile);
}

/* =============================================================================
   5. Skip link (a11y — UX-DR29, NFR-13)
   ============================================================================= */

.skip-link {
    position: absolute;
    top: -100px;
    left: var(--space-margin-mobile);
    z-index: 1000;
    background: var(--color-surface);
    color: var(--color-on-surface);
    padding: var(--space-unit) var(--space-gutter);
    border: 2px solid var(--color-focus-ring);
    border-radius: var(--rounded-DEFAULT);
    text-decoration: none;
    font-weight: 600;
    transition: top 150ms ease-out;
}

.skip-link:focus-visible {
    top: var(--space-unit);
    outline: none;
}

/* =============================================================================
   6. Focus styles (a11y — NFR-13, UX-DR29)
   ============================================================================= */

:focus-visible {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 2px;
    border-radius: var(--rounded-DEFAULT);
}

/* Remove the default focus ring on mouse-clicked elements but keep for keyboard */
:focus:not(:focus-visible) {
    outline: none;
}

/* =============================================================================
   7. Components scaffold (placeholder — populated in later stories)
   ============================================================================= */

/* --- Buttons (UX-DR6) ----------------------------------------------------- */

.btn {
    display: inline-block;
    font-family: var(--font-body);
    font-size: var(--type-body-md-size);
    font-weight: 500;
    line-height: 1.4;
    padding: var(--button-padding-y) var(--button-padding-x);
    border-radius: var(--rounded-DEFAULT);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
    text-align: center;
}

.btn--primary {
    background-color: var(--color-primary);
    color: var(--color-on-primary);
}
.btn--primary:hover,
.btn--primary:focus-visible {
    background-color: var(--color-primary-hover);
    color: var(--color-on-primary);
}

.btn--secondary {
    background-color: var(--color-surface);
    color: var(--color-primary);
    border-color: var(--color-primary);
}
.btn--secondary:hover,
.btn--secondary:focus-visible {
    background-color: var(--color-surface-warm);
    color: var(--color-primary);
}

.btn--ghost {
    background-color: transparent;
    color: var(--color-link);
    padding-left: 0;
    padding-right: 0;
}
.btn--ghost:hover,
.btn--ghost:focus-visible {
    color: var(--color-link-hover);
}

.btn--danger {
    background-color: var(--color-danger);
    color: var(--color-on-danger);
}

/* --- Badges (UX-DR9) ------------------------------------------------------ */

.badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: var(--rounded-full);
    font-size: var(--type-caption-size);
    line-height: 1.4;
    font-weight: 500;
}

.badge--regular {
    background-color: var(--color-badge-regular-bg);
    color: var(--color-badge-regular-fg);
}

.badge--liberal {
    background-color: var(--color-badge-liberal-bg);
    color: var(--color-badge-liberal-fg);
}

.badge--neutral {
    background-color: var(--color-badge-neutral-bg);
    color: var(--color-badge-neutral-fg);
}

/* --- Source-binding markers (Story 1.6, AR-13, UX-DR25) ------------------ */

.src-ref {
    font-size: 0.75em;
    vertical-align: super;
    line-height: 1;
    margin-left: 1px;
}

.src-ref a {
    color: var(--color-primary);
    text-decoration: none;
}

.src-ref a:hover,
.src-ref a:focus-visible {
    text-decoration: underline;
}

.marker {
    font-family: var(--font-mono);
    font-size: var(--type-mono-data-size);
    /* muted (#555) plutôt que faint (#888) : #888 sur blanc ≈ 3.5:1,
       sous le seuil WCAG AA ; #555 ≈ 7:1. */
    color: var(--color-on-surface-muted);
}

.marker--missing,
.marker--contested,
.marker--outdated {
    /* All three share the same visual register per UX-DR25. */
    background-color: transparent;
}

/* =============================================================================
   7b. Site chrome (header / secondary band / breadcrumb / footer)
   ============================================================================= */

/* --- Top bar (450.fm black date+socials strip) -------------------------- */

.td-topbar {
    background: var(--color-topbar-bg);
    color: var(--color-topbar-fg);
    font-family: var(--font-ui);
    font-size: 11px;
    letter-spacing: 0.04em;
}

.td-topbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-unit);
    min-height: 32px;
    padding-top: 6px;
    padding-bottom: 6px;
}

.td-topbar__date {
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
}

.td-topbar__socials {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 4px;
}

.td-topbar__social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    font-family: var(--font-ui);
    font-size: 14px;
    line-height: 1;
    border-radius: var(--rounded-sm);
}

.td-topbar__social:hover,
.td-topbar__social:focus-visible {
    color: var(--color-450-accent);
    background: rgba(255, 255, 255, 0.05);
}

/* --- Main header (450.fm white bar with centred logo + menu) ------------ */

.td-header {
    background: var(--color-header-bg);
    color: var(--color-header-fg);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02);
}

.td-header__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding-top: 16px;
    padding-bottom: 16px;
    position: relative;
}

.td-header__brand {
    display: inline-block;
    text-decoration: none;
    line-height: 0;
}

.td-header__logo {
    height: auto;
    width: auto;
    max-height: 80px;
    max-width: 240px;
    display: block;
}

.td-header__burger {
    position: absolute;
    top: 12px;
    right: var(--space-margin-mobile);
    width: 40px;
    height: 40px;
    background: transparent;
    border: 0;
    color: var(--color-header-fg);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    border-radius: var(--rounded-sm);
}

.td-header__burger:hover,
.td-header__burger:focus-visible {
    color: var(--color-450-accent);
    background: rgba(0, 0, 0, 0.04);
    outline: none;
}

.td-header__nav {
    width: 100%;
    display: none;
}

.td-header__nav.is-open {
    display: block;
}

.td-header__menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.td-header__menu > li {
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.td-header__menu a {
    display: flex;
    align-items: center;
    min-height: var(--field-height);
    padding: 0 var(--space-margin-mobile);
    font-family: var(--font-ui);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--color-header-fg);
}

.td-header__menu a:hover,
.td-header__menu a:focus-visible {
    color: var(--color-450-accent);
    background: rgba(77, 178, 236, 0.06);
    outline: none;
}

/* Home icon (mirror of the 450.fm WP menu's house item) — navy house
   linking back to the journal's front page. */
.td-header__menu-item--home a {
    color: var(--color-primary);
}

.td-header__menu-item--home svg {
    display: block;
}

.td-header__menu-item--current a {
    /* --color-primary (#1660a5) keeps the brand identity while clearing
       WCAG AA on white (the bright #4db2ec accent would land ~2.5:1). The
       bright accent stays as the bullet / underline so the visual cue
       remains. */
    color: var(--color-primary);
}

.td-header__menu-item--current a::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 8px;
    background: var(--color-450-accent);
    border-radius: 50%;
    vertical-align: middle;
}

@media (min-width: 768px) {
    .td-header__inner {
        padding-top: 20px;
        padding-bottom: 8px;
    }
    .td-header__logo {
        max-height: 96px;
        max-width: 283px;
    }
    .td-header__burger {
        display: none;
    }
    .td-header__nav {
        display: block;
        border-top: 1px solid rgba(0, 0, 0, 0.06);
        margin-top: 8px;
        padding-top: 0;
    }
    .td-header__menu {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0;
        border-top: 0;
    }
    .td-header__menu > li {
        border-bottom: 0;
    }
    .td-header__menu a {
        padding: 0 14px;
        min-height: 48px;
        border-bottom: 3px solid transparent;
    }
    .td-header__menu a:hover,
    .td-header__menu a:focus-visible {
        background: transparent;
        border-bottom-color: var(--color-450-accent);
    }
    .td-header__menu-item--current a {
        border-bottom-color: var(--color-450-accent);
    }
    .td-header__menu-item--current a::before {
        display: none;
    }
}

/* --- Secondary band ------------------------------------------------------ */

.secondary-band {
    background: var(--color-surface-warm);
    border-bottom: var(--border-hairline-soft);
}

.secondary-band__inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-unit);
    padding-top: 12px;
    padding-bottom: 12px;
}

.secondary-band__tagline {
    /* muted (#555) : le faint (#888) sur le fond clair du bandeau
       échouait le contraste WCAG AA. */
    color: var(--color-on-surface-muted);
    margin: 0;
    text-align: center;
}

.secondary-band__search {
    position: relative;
    display: flex;
    gap: 4px;
    align-items: center;
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
}

.secondary-band__search-input {
    flex: 1;
    height: var(--field-height);
    padding: 0 var(--field-padding);
    border: var(--border-hairline);
    border-radius: var(--rounded-md);
    background: var(--color-surface);
    font-family: inherit;
    font-size: var(--type-body-md-size);
}

.secondary-band__search-input:focus-visible {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 2px;
    border-color: var(--color-primary);
}

.secondary-band__search-submit {
    height: var(--field-height);
    width: var(--field-height);
    border: var(--border-hairline);
    border-radius: var(--rounded-md);
    background: var(--color-surface);
    color: var(--color-on-surface-faint);
    cursor: pointer;
    font-size: 22px;
    line-height: 1;
}

.secondary-band__search-submit:hover,
.secondary-band__search-submit:focus-visible {
    color: var(--color-accent);
}

/* --- Search suggest dropdown (Story 4.2) -------------------------------- */

.search-suggest {
    position: absolute;
    /* `top: 100%` anchors the dropdown to the BOTTOM of whatever the
     * `[data-suggest-anchor]` wrapper resolves to. Previously this used
     * `top: calc(var(--field-height) + 4px)`, which assumed the anchor's
     * first child was the input (true for the secondary-band form, where
     * the input is the only height-contributing child). In the comparator
     * picker the anchor is a field wrapper that also contains a <label>
     * above the input, so the old offset landed the dropdown roughly
     * label-height pixels ABOVE the input — visually overlapping it.
     * `top: 100%` is layout-agnostic. */
    top: 100%;
    margin-top: 4px;
    left: 0;
    right: 0;
    z-index: 500;
    padding: 4px 0;
    list-style: none;
    background: var(--color-surface);
    border: var(--border-hairline);
    border-radius: var(--rounded-md);
    box-shadow: var(--shadow-hover);
    max-height: 360px;
    overflow-y: auto;
}

.search-suggest__item {
    padding: 0;
}

.search-suggest__link {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-unit);
    padding: 8px var(--field-padding);
    text-decoration: none;
    color: var(--color-on-surface);
    font-size: var(--type-body-sm-size);
    line-height: var(--type-body-sm-line);
}

.search-suggest__link:hover,
.search-suggest__item--active .search-suggest__link {
    background: var(--color-surface-warm);
    color: var(--color-primary);
}

.search-suggest__meta {
    font-family: var(--font-mono);
    font-size: var(--type-caption-size);
    color: var(--color-on-surface-faint);
    flex-shrink: 0;
}

/* Country-page suggestion ("Canada — pays · 19 obédiences"): set apart
   from the obedience entries it precedes. */
.search-suggest__link--country {
    font-weight: 600;
    border-bottom: 1px solid var(--color-border, rgba(0, 0, 0, 0.08));
}

/* --- Search results page (Story 4.3) ----------------------------------- */

.search-page__form {
    display: flex;
    gap: var(--space-unit);
    margin-bottom: var(--space-gutter);
    max-width: 720px;
}

.search-page__input {
    flex: 1;
    height: var(--field-height);
    padding: 0 var(--field-padding);
    border: 1px solid var(--color-outline);
    border-radius: var(--rounded-sm);
    background: var(--color-surface);
    font-family: var(--font-body);
    font-size: var(--type-body-md-size);
}

.search-page__input:focus-visible {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 2px;
    border-color: var(--color-primary);
}

.search-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-unit);
    margin-bottom: var(--space-gutter);
}

.search-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px 4px 12px;
    background: var(--color-surface-warm);
    border: var(--border-hairline);
    border-radius: 9999px;
    color: var(--color-on-surface);
    text-decoration: none;
    font-size: var(--type-body-sm-size);
}

.search-chip:hover,
.search-chip:focus-visible {
    background: var(--color-surface-container-high);
}

.search-chip__remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--color-surface);
    color: var(--color-on-surface-muted);
    font-size: 14px;
    line-height: 1;
}

.search-results__count {
    margin: 0 0 var(--space-gutter) 0;
}

.search-results__list {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-section-gap-mobile) 0;
    display: grid;
    gap: var(--space-gutter);
}

@media (min-width: 768px) {
    .search-results__list {
        grid-template-columns: repeat(2, 1fr);
    }
}

.search-results__pagination {
    display: flex;
    justify-content: space-between;
    gap: var(--space-gutter);
    margin-top: var(--space-gutter);
}

.search-results__pagination a {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 600;
}

.search-results__pagination a:hover {
    color: var(--color-link-hover);
}

.search-results__empty {
    padding: var(--space-section-gap-mobile) 0;
    text-align: center;
    color: var(--color-on-surface-muted);
}

.search-results__empty p {
    margin: 0 0 var(--space-unit) 0;
}

@media (min-width: 768px) {
    .secondary-band__inner {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
    .secondary-band__tagline {
        text-align: left;
        margin-right: var(--space-gutter);
    }
}

/* --- Breadcrumb (UX-DR21) ------------------------------------------------ */

.breadcrumb {
    padding-top: var(--space-gutter);
    padding-bottom: 0;
}

.breadcrumb__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.breadcrumb__item {
    color: var(--color-on-surface-muted);
}

.breadcrumb__item a {
    color: var(--color-link);
    text-decoration: none;
}

.breadcrumb__item a:hover,
.breadcrumb__item a:focus-visible {
    text-decoration: underline;
    color: var(--color-link-hover);
}

.breadcrumb__separator {
    margin: 0 6px;
    color: var(--color-on-surface-faint);
}

/* --- Footer (450.fm dark slate with logo + columns + copyright bar) ----- */

.td-footer {
    color: var(--color-footer-fg);
    margin-top: var(--space-section-gap);
    font-family: var(--font-body);
}

.td-footer__main {
    background-color: var(--color-footer-bg);
    background-image: linear-gradient(rgba(35, 45, 53, 0.85), rgba(35, 45, 53, 0.95));
    padding: 56px 0 40px;
}

.td-footer__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    text-align: center;
}

.td-footer__brand {
    display: inline-block;
    line-height: 0;
    text-decoration: none;
}

.td-footer__logo {
    max-height: 96px;
    max-width: 240px;
    height: auto;
    width: auto;
    /* Logo is a JPEG on white from the WP media library — soften the
       integration onto the dark footer with a subtle white surround. */
    background: #ffffff;
    padding: 6px 12px;
    border-radius: var(--rounded-sm);
}

.td-footer__columns {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-gutter);
    width: 100%;
    text-align: left;
}

@media (min-width: 768px) {
    .td-footer__columns {
        grid-template-columns: repeat(3, 1fr);
    }
}

.td-footer__column {
    min-width: 0;
}

.td-footer__heading {
    font-family: var(--font-ui);
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0 0 12px 0;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--color-450-accent);
    color: var(--color-footer-fg);
    display: inline-block;
}

.td-footer__text {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.75);
}

.td-footer__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.td-footer__list a,
.td-footer__text a {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    font-size: 14px;
}

.td-footer__list a:hover,
.td-footer__list a:focus-visible,
.td-footer__text a:hover,
.td-footer__text a:focus-visible {
    color: var(--color-450-accent);
    text-decoration: underline;
}

.td-footer__socials {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 8px;
    justify-content: center;
}

.td-footer__social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: var(--color-footer-fg);
    background: rgba(255, 255, 255, 0.06);
    text-decoration: none;
    font-family: var(--font-ui);
    font-size: 16px;
    border-radius: 50%;
}

.td-footer__social:hover,
.td-footer__social:focus-visible {
    background: var(--color-450-accent);
    color: #ffffff;
    outline: none;
}

.td-footer__base {
    background: var(--color-footer-base-bg);
    color: rgba(255, 255, 255, 0.6);
    padding: 16px 0;
}

.td-footer__base-inner {
    text-align: center;
}

.td-footer__copy {
    margin: 0;
    font-family: var(--font-ui);
    font-size: 12px;
    letter-spacing: 0.04em;
}

/* --- Visually hidden (a11y) --------------------------------------------- */

.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* =============================================================================
   7c. Fiche surfaces (Story 1.7)
   ============================================================================= */

.fiche {
    padding-top: var(--space-gutter);
}

.fiche__header {
    margin-bottom: var(--space-section-gap-mobile);
}

.fiche__name {
    margin-bottom: 4px;
}

.fiche__acronym {
    color: var(--color-on-surface-faint);
    margin: 0 0 var(--space-unit) 0;
}

.erratum-notice {
    margin-top: var(--space-gutter);
    background: var(--color-surface-warm);
    border-left: 4px solid var(--color-accent);
    border-radius: var(--rounded-md);
    padding: var(--space-unit) var(--space-gutter);
}

.erratum-notice .label-caps {
    color: var(--color-accent);
    margin: 0 0 4px 0;
}

.fiche__body {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-section-gap-mobile);
}

@media (min-width: 1024px) {
    .fiche__body {
        grid-template-columns: 1fr minmax(280px, 320px);
        gap: var(--space-section-gap);
    }
    /* On desktop the infobox sits on the right per UX-DR8 */
    .fiche__body .infobox {
        order: 2;
        position: sticky;
        top: var(--space-gutter);
        align-self: start;
    }
    .fiche__narrative {
        order: 1;
    }
}

.fiche__narrative {
    max-width: var(--space-reading-width);
    margin-inline: auto;
}

.fiche__section {
    margin-bottom: var(--space-section-gap-mobile);
}

.fiche__section h2 {
    font-family: var(--font-display);
    color: var(--color-primary);
}

/* Multi-paragraph narrative bodies — vertical rhythm + reading
   width so prose doesn't look like a single dense wall. Pairs with
   the paragraph_breaks_history.php backfill that converted each
   one-paragraph heredoc into 3-4 thematic paragraphs. */
.fiche__section p {
    margin: 0 0 1em 0;
    line-height: 1.75;
    /* Justification par défaut des textes de fiche ; la césure
       automatique (fr) évite les rivières/grands blancs entre mots. */
    text-align: justify;
    -webkit-hyphens: auto;
    hyphens: auto;
}
.fiche__section p:last-child {
    margin-bottom: 0;
}

/* Source-reference superscripts emitted by render_narrative_marker():
   tighter font, muted color so the `[N]` links don't fight the prose. */
.src-ref {
    font-size: 0.72em;
    vertical-align: super;
    line-height: 0;
    margin-left: 1px;
}
.src-ref a {
    color: var(--color-on-surface-muted);
    text-decoration: none;
    border-bottom: 1px dotted currentColor;
}
.src-ref a:hover,
.src-ref a:focus-visible {
    color: var(--color-primary);
}

.fiche__footer {
    margin-top: var(--space-section-gap-mobile);
    padding-top: var(--space-gutter);
    border-top: var(--border-hairline-soft);
}

.fiche__footer-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-gutter);
    margin: 0;
}

/* --- Infobox component (UX-DR8) ----------------------------------------- */

.infobox {
    background: var(--color-surface-container);
    border-radius: var(--rounded-lg);
    padding: var(--infobox-padding);
    border: var(--border-hairline-soft);
}

.infobox__header {
    display: flex;
    justify-content: center;
    margin-bottom: var(--space-unit);
}

/* Médaillon : la plupart des blasons sont des sceaux ronds — l'assiette
   circulaire les épouse au lieu de les poser sur un carré. Le padding
   garde les écussons rectangulaires entiers (object-fit: contain), et
   les coins éventuellement rognés par le cercle tombent dans le blanc
   de l'assiette, jamais dans le dessin. */
.infobox__blason {
    width: 112px;
    height: 112px;
    border-radius: var(--rounded-full);
    background: var(--color-surface);
    padding: 12px;
    object-fit: contain;
    border: var(--border-hairline-soft);
    box-shadow: var(--shadow-hover);
}

.infobox__list {
    margin: 0;
    padding: 0;
}

.infobox__row {
    display: flex;
    flex-direction: column;
    padding: var(--space-unit) 0;
    border-bottom: var(--border-hairline-soft);
}

.infobox__row:last-child {
    border-bottom: 0;
}

.infobox__row dt {
    margin: 0 0 2px 0;
}

.infobox__row dd {
    margin: 0;
    color: var(--color-on-surface);
}

/* --- Source citation block (UX-DR18) ------------------------------------ */

.source-block {
    margin-top: var(--space-section-gap-mobile);
    padding-top: var(--space-gutter);
    border-top: var(--border-hairline-soft);
}

.source-block__list {
    list-style: decimal;
    padding-left: var(--space-gutter);
}

.source-block__item {
    margin-bottom: var(--space-unit);
}

.source-block__meta {
    display: block;
    color: var(--color-on-surface-faint);
}

/* --- « Dans le journal » : articles 450.fm (FR-19) --------------------- */

.journal-block {
    margin-top: var(--space-section-gap-mobile);
    padding-top: var(--space-gutter);
    border-top: var(--border-hairline-soft);
}

.journal-block__heading {
    font-family: var(--font-display);
    color: var(--color-primary);
    margin: 0 0 4px 0;
}

.journal-block__lead {
    color: var(--color-on-surface-muted);
    font-size: var(--type-body-sm-size);
    margin: 0 0 var(--space-gutter) 0;
}

.journal-block__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 12px;
}

/* Carte article — cliquable en entier, vignette 450.fm à gauche (quand
   l'article en a une), accent à gauche, légère élévation au survol
   (même langage que les cartes de résultats). overflow:hidden clippe
   l'image aux coins arrondis de la carte. */
.journal-card__link {
    display: flex;
    align-items: stretch;
    background: var(--color-surface);
    border: var(--border-hairline-soft);
    border-left: 3px solid var(--color-primary);
    border-radius: var(--rounded-md);
    overflow: hidden;
    text-decoration: none;
    color: var(--color-on-surface);
    transition: box-shadow 0.15s ease, transform 0.15s ease, border-left-color 0.15s ease;
}

.journal-card__link:hover,
.journal-card__link:focus-visible {
    box-shadow: var(--shadow-hover);
    transform: translateY(-1px);
    border-left-color: var(--color-focus-ring);
}

/* Vignette : largeur fixe, hauteur étirée sur la carte, recadrée. Fond
   neutre en attendant le chargement (lazy). */
.journal-card__thumb {
    flex: 0 0 140px;
    align-self: stretch;
    overflow: hidden;
    background: var(--color-surface-container);
}

.journal-card__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 96px;
    object-fit: cover;
}

.journal-card__body {
    flex: 1 1 auto;
    min-width: 0;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "date   source"
        "title  title";
    gap: 2px 12px;
    align-items: baseline;
    padding: 14px 16px;
}

.journal-card__date {
    grid-area: date;
    font-size: var(--type-label-caps-size);
    letter-spacing: var(--type-label-caps-tracking);
    text-transform: uppercase;
    color: var(--color-on-surface-muted);
}

.journal-card__title {
    grid-area: title;
    font-family: var(--font-display);
    font-size: var(--type-headline-sm-size);
    line-height: 1.35;
    color: var(--color-primary);
}

.journal-card__source {
    grid-area: source;
    font-size: var(--type-label-caps-size);
    font-weight: 600;
    color: var(--color-focus-ring);
    white-space: nowrap;
}

/* Mobile : la vignette passe en bandeau au-dessus du texte. */
@media (max-width: 600px) {
    .journal-card__link {
        flex-direction: column;
    }
    .journal-card__thumb {
        flex-basis: auto;
        height: 150px;
    }
}

/* --- Page « Merci pour votre signalement » ----------------------------- */

.signalement-ok {
    max-width: var(--space-reading-width);
    margin-inline: auto;
    padding-block: var(--space-section-gap-mobile);
}

.signalement-ok h1 {
    font-family: var(--font-display);
    color: var(--color-primary);
    margin: 0 0 var(--space-gutter) 0;
}

/* La colonne de lecture s'aligne sous le titre (pas de re-centrage
   margin-inline:auto qui décalait le paragraphe vers la droite). */
.signalement-ok .longform {
    margin-inline: 0;
    max-width: none;
    margin-bottom: var(--space-gutter);
}

.signalement-ok p {
    margin: 0 0 var(--space-unit) 0;
}

/* --- Comparator (Story 5.1, FR-12) -------------------------------------- */

.comparator {
    padding-top: var(--space-gutter);
}

.comparator__header {
    margin-bottom: var(--space-gutter);
}

.comparator__table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: var(--space-section-gap-mobile);
    background: var(--color-surface);
}

.comparator__table th,
.comparator__table td {
    padding: var(--space-unit) var(--space-gutter);
    border-bottom: var(--border-hairline-soft);
    text-align: left;
    vertical-align: top;
}

.comparator__table thead th {
    font-family: var(--font-display);
    font-size: var(--type-headline-sm-size);
    color: var(--color-primary);
    border-bottom: var(--border-hairline);
}

.comparator__attr-header {
    width: 30%;
}

.comparator__row th {
    color: var(--color-on-surface-muted);
    font-weight: var(--type-label-caps-weight);
}

.comparator__diff td {
    background: var(--color-surface-warm);
    font-weight: 500;
}

@media (max-width: 767px) {
    .comparator__table,
    .comparator__table thead,
    .comparator__table tbody,
    .comparator__table tr,
    .comparator__table th,
    .comparator__table td {
        display: block;
        width: 100%;
    }
    .comparator__table thead {
        display: none;
    }
    .comparator__row {
        border: var(--border-hairline-soft);
        border-radius: var(--rounded-md);
        margin-bottom: var(--space-gutter);
        padding: var(--space-unit) var(--space-gutter);
    }
    .comparator__row th,
    .comparator__row td {
        padding: 4px 0;
        border-bottom: none;
    }
}

.comparator__excerpts {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-gutter);
}

@media (min-width: 768px) {
    .comparator__excerpts {
        grid-template-columns: repeat(2, 1fr);
    }
}

.comparator-picker {
    padding-top: var(--space-gutter);
}

.comparator-picker__form {
    display: grid;
    gap: var(--space-gutter);
    max-width: 480px;
    margin-top: var(--space-gutter);
}

.comparator-picker__field {
    position: relative; /* Anchors the suggest dropdown to the field wrapper. */
}

.comparator-picker__error {
    padding: var(--space-unit) var(--space-gutter);
    margin-bottom: var(--space-gutter);
    background: rgba(164, 48, 44, 0.08); /* tinted danger surface */
    border-left: 4px solid var(--color-danger);
    border-radius: var(--rounded-sm);
    color: var(--color-on-surface);
    font-size: var(--type-body-sm-size);
}

.comparator-picker__field input[aria-invalid="true"],
.comparator-picker__field select[aria-invalid="true"] {
    border-color: var(--color-danger);
}

.comparator-picker__field select {
    width: 100%;
    padding: var(--space-unit) var(--space-gutter);
    font-family: var(--font-body);
    font-size: var(--type-body-md-size);
    background: var(--color-surface);
    border: var(--border-hairline);
    border-radius: var(--rounded-sm);
    color: var(--color-on-surface);
}

.comparator-picker__field label {
    display: block;
    margin-bottom: 6px;
    font-size: var(--type-body-sm-size);
    color: var(--color-on-surface-muted);
}

.comparator-picker__field input {
    width: 100%;
    height: var(--field-height);
    padding: 0 var(--field-padding);
    border: var(--border-hairline);
    border-radius: var(--rounded-md);
    background: var(--color-surface);
    font-family: inherit;
    font-size: var(--type-body-md-size);
}

.comparator-picker__field input:focus-visible {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 2px;
    border-color: var(--color-primary);
}

/* --- Methodology page (Story 9.1) --------------------------------------- */

.methodology {
    padding-top: var(--space-gutter);
}

.methodology__header {
    margin-bottom: var(--space-section-gap-mobile);
}

.methodology__counters {
    margin-bottom: var(--space-section-gap-mobile);
    padding: var(--card-padding);
    background: var(--color-surface-container);
    border-radius: var(--rounded-lg);
}

.methodology__counters-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-gutter);
    margin: 0;
}

@media (min-width: 640px) {
    .methodology__counters-list {
        grid-template-columns: repeat(3, 1fr);
    }
}

.methodology__counter dt {
    margin-bottom: 4px;
}

.methodology__counter dd {
    margin: 0;
    font-size: var(--type-headline-md-size);
    color: var(--color-primary);
}

.methodology__section {
    margin-bottom: var(--space-section-gap-mobile);
}

.methodology__section h2 {
    font-family: var(--font-display);
    color: var(--color-primary);
    margin-top: var(--space-gutter);
}

.methodology__section ul {
    margin-bottom: var(--space-gutter);
}

.methodology__section li {
    margin-bottom: var(--space-unit);
}

/* --- Landing hero + tiles (Story 3.1, UX-DR4, UX-DR11) ------------------ */

.landing-hero {
    margin-bottom: var(--space-section-gap-mobile);
    position: relative;
}

/* Mobile preview surface — shown < 768px, hidden ≥ 768px (UX-DR4). */
.map-mobile-preview {
    width: 100%;
    height: 240px;
    background: var(--color-surface-container);
    border-radius: var(--rounded-lg);
    border: var(--border-hairline-soft);
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: var(--space-gutter);
    overflow: hidden;
}

.map-mobile-preview__visual {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 30% 40%, var(--color-surface-container-high) 0%, transparent 40%),
        radial-gradient(circle at 70% 60%, var(--color-surface-warm) 0%, transparent 50%),
        var(--color-surface-container);
    opacity: 0.7;
}

.map-mobile-preview__open {
    position: relative;
    z-index: 1;
    appearance: none;
    border: 1px solid var(--color-primary);
    background: var(--color-surface);
    color: var(--color-primary);
    padding: 10px 20px;
    border-radius: var(--rounded-sm);
    font-family: var(--font-body);
    font-size: var(--type-body-sm-size);
    font-weight: 600;
    cursor: pointer;
}

.map-mobile-preview__open:hover,
.map-mobile-preview__open:focus-visible {
    background: var(--color-surface-warm);
}

/* Desktop map surface — hidden < 768px; takes the upper two-thirds ≥ 1024px. */
.map-slot {
    display: none;
    width: 100%;
    height: 480px;
    background: var(--color-surface-container);
    border-radius: var(--rounded-lg);
    border: var(--border-hairline-soft);
    position: relative;
    overflow: hidden;
}

@media (min-width: 768px) {
    .map-mobile-preview { display: none; }
    .map-slot { display: block; height: 60vh; min-height: 480px; }
}

@media (min-width: 1024px) {
    .map-slot { height: 66vh; min-height: 540px; }
}

.map-loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-on-surface-faint);
    font-family: var(--font-body);
    pointer-events: none;
    background: var(--color-surface-container);
    z-index: 400;
}

.map-fallback {
    padding: var(--space-gutter);
    text-align: left;
    background: var(--color-surface-container);
    color: var(--color-on-surface);
    overflow-y: auto;
    height: 100%;
}

/* Noscript-only fallback sits OUTSIDE #map (which is display:none on mobile)
   so JS-disabled visitors get a real entry point at every viewport. */
.map-fallback--noscript {
    height: auto;
    border-radius: var(--rounded-lg);
    border: var(--border-hairline-soft);
    margin-bottom: var(--space-gutter);
    text-align: center;
}

.map-slot--fallback { border-color: transparent; }

.map-fallback__intro {
    font-size: var(--type-body-md-size);
    margin: 0 0 var(--space-gutter) 0;
    color: var(--color-on-surface-muted);
}

.map-fallback__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: var(--space-gutter);
}

@media (min-width: 768px) {
    .map-fallback__list { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
    .map-fallback__list { grid-template-columns: repeat(3, 1fr); }
}

.map-fallback__list > li > a { color: var(--color-primary); text-decoration: none; }

.map-fallback__list ul {
    list-style: none;
    padding: 4px 0 0 var(--space-unit);
    margin: 4px 0 0 0;
}

/* --- Medallions (Story 3.4, UX-DR13) ------------------------------------- */

.medallion-wrap { background: transparent; border: 0; }

.medallion {
    display: block;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid #FFFFFF;
    box-shadow: 0 1px 3px rgba(26, 58, 82, 0.18);
    cursor: pointer;
    transition: transform 200ms ease-out;
    box-sizing: border-box;
}

.medallion--regular { background: var(--color-primary); }
.medallion--liberal { background: var(--color-accent); }

.medallion:hover { transform: scale(1.1); }

.medallion:focus-visible {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 2px;
}

.map-slot--reduced-motion .medallion { transition: none; }
.map-slot--reduced-motion .medallion:hover { transform: none; }

@media (prefers-reduced-motion: reduce) {
    .medallion { transition: none; }
    .medallion:hover { transform: none; }
}

/* --- Co-located super-cluster pin + side panel (Story 8.4 slice 3) ------ */
/*
 * When ≥ 2 obediences share the same public coords (display_lat/lon),
 * map.js renders ONE custom pin labelled with the group count. Distinct
 * shape from markercluster's auto-bubbles so the user reads it as
 * "city hub, click for the list" rather than "automatic cluster".
 */

.colocated-pin {
    /* The L.divIcon wrapper is 44×44, the inner badge is positioned
       absolute so it can carry the dropshadow + ring. */
    position: relative;
    width: 44px;
    height: 44px;
    cursor: pointer;
}

.colocated-pin__badge {
    /* Match .cluster-badge typography + shape exactly so the city-hub
       pin reads as part of the same visual family as the auto-cluster
       bubbles. Distinction comes from size (44 px vs 36 px) and the
       gold focus ring on hover — not from a clashing serif font, gold
       border, or rounded-square shape. */
    position: absolute;
    inset: 0;
    background: var(--color-primary);
    color: var(--color-on-primary);
    border: 2px solid #FFFFFF;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-body);
    font-size: var(--type-body-sm-size);
    font-weight: 600;
    line-height: 1;
    box-shadow: 0 2px 6px rgba(26, 58, 82, 0.25);
    transition: transform 120ms ease-out, box-shadow 120ms ease-out, outline-color 120ms ease-out;
    outline: 2px solid transparent;
    outline-offset: 1px;
}

.colocated-pin:hover .colocated-pin__badge,
.colocated-pin:focus-visible .colocated-pin__badge {
    transform: scale(1.08);
    box-shadow: 0 4px 10px rgba(26, 58, 82, 0.35);
    outline-color: var(--color-accent);
}

/* Side panel (desktop ≥ 768 px) ------------------------------------------ */

.colocated-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: 420px;
    max-width: 90vw;
    height: 100vh;
    background: var(--color-surface, #fff);
    border-left: 1px solid var(--color-on-surface-faint, #e5e5e5);
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.12);
    /* Above the mobile full-screen map modal (z-index 9000): tapping a
       city pin inside the modal must bring the panel to the front, not
       slide it open invisibly underneath. */
    z-index: 9500;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 240ms ease-out;
    overflow: hidden;
}

.colocated-panel.is-open {
    transform: translateX(0);
}

.colocated-panel.is-hidden {
    /* aria-hidden equivalent — keeps the DOM but disables interactions */
    pointer-events: none;
}

.colocated-panel.is-open.is-hidden {
    pointer-events: auto;
}

.colocated-panel__header {
    padding: var(--space-gutter);
    border-bottom: 1px solid var(--color-on-surface-faint, #e5e5e5);
    background: var(--color-surface, #fff);
    position: sticky;
    top: 0;
    z-index: 1;
}

.colocated-panel__close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 44px;
    height: 44px;
    border: none;
    background: transparent;
    font-size: 28px;
    line-height: 1;
    color: var(--color-on-surface-muted, #666);
    cursor: pointer;
    border-radius: 4px;
}

.colocated-panel__close:hover,
.colocated-panel__close:focus-visible {
    background: var(--color-surface-warm, #f5f5f0);
    color: var(--color-primary, #1a3a5c);
}

.colocated-panel__title {
    font-family: var(--font-display, serif);
    font-size: 22px;
    font-weight: 600;
    color: var(--color-primary, #1a3a5c);
    margin: 0 44px 12px 0;
    line-height: 1.3;
}

.colocated-panel__disclosure {
    background: var(--color-accent-soft);
    border-left: 3px solid var(--color-accent);
    padding: 10px 14px;
    border-radius: 4px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--color-on-surface, #222);
}

.colocated-panel__disclosure strong {
    display: block;
    margin-bottom: 2px;
}

.colocated-panel__disclosure a {
    color: var(--color-primary, #1a3a5c);
    text-decoration: underline;
}

.colocated-panel__list {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-unit);
}

.colocated-panel__item {
    display: block;
    padding: 12px 14px;
    margin-bottom: 8px;
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-on-surface-faint, #e5e5e5);
    border-radius: 6px;
    color: var(--color-on-surface, #222);
    text-decoration: none;
    transition: background 120ms ease;
}

.colocated-panel__item:hover,
.colocated-panel__item:focus-visible {
    background: var(--color-surface-warm, #f5f5f0);
    border-color: var(--color-accent, #d4af37);
}

.colocated-panel__item-name {
    font-family: var(--font-display, serif);
    font-size: 16px;
    font-weight: 600;
    color: var(--color-primary, #1a3a5c);
    margin: 0 0 4px 0;
}

.colocated-panel__item-meta {
    font-size: 12px;
    color: var(--color-on-surface-muted, #666);
}

/* Pastilles de rites sous chaque obédience du panneau — le rite
   principal en plein, les autres en filigrane. */
.colocated-panel__item-rites {
    margin: 6px 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.rite-chip {
    font-size: 11px;
    line-height: 1.3;
    padding: 1px 8px;
    border-radius: var(--rounded-full);
    border: var(--border-hairline-soft);
    background: var(--color-surface);
    color: var(--color-on-surface-muted, #666);
    white-space: nowrap;
}

.rite-chip--primary {
    border-color: var(--color-primary, #1a3a5c);
    color: var(--color-primary, #1a3a5c);
    font-weight: 700;
}

/* Couleurs par rite (codes éditoriaux, 2026-06-12). Déclarées APRÈS
   --primary : la couleur du rite l'emporte, le rite principal se
   distingue par la graisse et sa position en tête. Texte choisi pour
   le contraste sur chaque fond ; un rite sans couleur attitrée
   (p. ex. Memphis-Misraïm) garde la pastille neutre. */
/* Rouge REAA : noms court ET complet (la classe dérive du libellé) +
   Rite Écossais Primitif, même rouge sur demande. */
.rite-chip--reaa,
.rite-chip--riteecossaisancienetaccepte,
.rite-chip--riteecossaisprimitif {
    background: #ff282e;
    border-color: #ff282e;
    color: #ffffff;
}

.rite-chip--francais,
.rite-chip--ritefrancais {
    background: #006cb7;
    border-color: #006cb7;
    color: #ffffff;
}

/* Gris-bleu RER : nom court ET complet. */
.rite-chip--rer,
.rite-chip--riteecossaisrectifie {
    background: #c3c9dc;
    border-color: #c3c9dc;
    color: #2a3550;
}

.rite-chip--york {
    background: #1949d2;
    border-color: #1949d2;
    color: #ffffff;
}

.rite-chip--memphis,
.rite-chip--memphismisraim {
    background: #74008d;
    border-color: #74008d;
    color: #ffffff;
}

.rite-chip--riteemulation,
.rite-chip--emulation {
    background: #73b4c7;
    border-color: #73b4c7;
    color: #08272c;
}

.rite-chip--riteoperatifdesalomon {
    background: #2b2db0;
    border-color: #2b2db0;
    color: #ffffff;
}

.rite-chip--ritestandarddecosse {
    background: #661c25;
    border-color: #661c25;
    color: #ffffff;
}

.rite-chip--ritancien {
    background: #0c171d;
    border-color: #0c171d;
    color: #ffffff;
}

.rite-chip--ritesuedois {
    background: #62cacf;
    border-color: #62cacf;
    color: #08272c;
}

.rite-chip--ritedeschroder {
    background: #a3bcd8;
    border-color: #a3bcd8;
    color: #2a3550;
}

.rite-chip--ritedecerneau {
    background: #1f8c57;
    border-color: #1f8c57;
    color: #ffffff;
}

.rite-chip--ritemodernedecosse {
    background: #27582a;
    border-color: #27582a;
    color: #ffffff;
}

/* Seconde ligne de l'infobulle d'un médaillon : pastilles de rites. */
.medallion-tooltip__rites {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}

.colocated-panel__footer {
    padding: var(--space-unit) var(--space-gutter);
    border-top: 1px solid var(--color-on-surface-faint, #e5e5e5);
    background: var(--color-surface-warm, #f5f5f0);
}

.colocated-panel__see-all {
    display: block;
    text-align: center;
    color: var(--color-primary, #1a3a5c);
    text-decoration: none;
    font-weight: 600;
    padding: 10px;
}

.colocated-panel__see-all:hover,
.colocated-panel__see-all:focus-visible {
    text-decoration: underline;
}

/* Mobile bottom-sheet variant (≤ 767 px) -------------------------------- */
@media (max-width: 767px) {
    .colocated-panel {
        top: auto;
        bottom: 0;
        right: 0;
        left: 0;
        width: 100%;
        max-width: none;
        height: 85vh;
        max-height: 85vh;
        border-left: 0;
        border-top: 1px solid var(--color-on-surface-faint, #e5e5e5);
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.18);
        transform: translateY(100%);
    }
    .colocated-panel.is-open {
        transform: translateY(0);
    }
}

/* --- Cluster badges (Story 3.5, UX-DR13 cluster variant) ----------------- */

.cluster-wrap { background: transparent; border: 0; }

.cluster-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--color-primary);
    color: var(--color-on-primary);
    border: 2px solid #FFFFFF;
    box-shadow: 0 2px 6px rgba(26, 58, 82, 0.2);
    font-family: var(--font-body);
    font-size: var(--type-body-sm-size);
    font-weight: 600;
    cursor: pointer;
}

/* Hide Leaflet.markercluster's default skin — we provide our own. */
.marker-cluster, .marker-cluster div { background: transparent !important; }

/* Medallion hover tooltip (Leaflet's bindTooltip). */
.leaflet-tooltip.medallion-tooltip {
    background: var(--color-surface);
    color: var(--color-on-surface);
    border: var(--border-hairline);
    border-radius: var(--rounded-sm);
    font-family: var(--font-body);
    font-size: var(--type-body-sm-size);
    padding: 4px 8px;
    box-shadow: 0 1px 4px rgba(26, 58, 82, 0.12);
}

/* --- Preview card (Story 3.5, UX-DR14) ----------------------------------- */

.preview-card {
    position: absolute;
    bottom: var(--space-gutter);
    right: var(--space-gutter);
    z-index: 500;
    width: min(320px, calc(100% - var(--space-gutter) * 2));
    background: var(--color-surface);
    border: var(--border-hairline);
    border-radius: var(--rounded-md);
    padding: var(--card-padding);
    box-shadow: var(--shadow-hover);
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity 150ms ease, transform 150ms ease;
}

.preview-card--visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.preview-card__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: var(--space-unit);
}

.preview-card__count {
    font-family: var(--font-mono);
    font-size: var(--type-caption-size);
    color: var(--color-on-surface-faint);
}

.preview-card__list {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-unit) 0;
}

.preview-card__list li {
    padding: 4px 0;
    font-size: var(--type-body-sm-size);
    border-bottom: 1px solid var(--color-outline-soft);
}

.preview-card__list li:last-child { border-bottom: 0; }

.preview-card__list a {
    color: var(--color-primary);
    text-decoration: none;
}

.preview-card__list a:hover { color: var(--color-link-hover); }

.preview-card__cta {
    display: inline-block;
    margin-top: var(--space-unit);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: var(--type-body-sm-size);
    color: var(--color-primary);
    text-decoration: underline;
}

/* --- Filter overlay (Story 3.6, UX-DR11) --------------------------------- */

.filter-overlay {
    position: absolute;
    top: var(--space-gutter);
    right: var(--space-gutter);
    z-index: 500;
    width: min(260px, calc(100% - var(--space-gutter) * 2));
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(4px);
    border: var(--border-hairline);
    border-radius: var(--rounded-md);
    padding: var(--space-gutter);
    display: flex;
    flex-direction: column;
    gap: var(--space-gutter);
    box-shadow: var(--shadow-hover);
}

/* Collapse toggle: hidden on desktop (filter always open in the corner),
   visible on small viewports where the 260px overlay would otherwise
   bury the map. Tap reveals the form via .filter-overlay--open. */
.filter-overlay__toggle {
    display: none;
    width: 100%;
    padding: 8px 4px;
    background: transparent;
    border: 0;
    cursor: pointer;
    font-family: var(--font-ui);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-on-surface);
    align-items: center;
    justify-content: space-between;
}

.filter-overlay__toggle-chevron {
    transition: transform 150ms ease-out;
}

@media (max-width: 767px) {
    .filter-overlay {
        /* Free of the form padding when collapsed so the trigger reads
           as a compact pill in the corner. */
        padding: 4px 8px;
        width: auto;
        min-width: 0;
    }
    .filter-overlay__toggle {
        display: flex;
    }
    .filter-overlay > *:not(.filter-overlay__toggle) {
        display: none;
    }
    .filter-overlay--open {
        padding: var(--space-unit);
        width: min(260px, calc(100% - var(--space-gutter) * 2));
    }
    .filter-overlay--open > *:not(.filter-overlay__toggle) {
        display: flex;
    }
    .filter-overlay--open .filter-overlay__toggle-chevron {
        transform: rotate(180deg);
    }
}

.filter-overlay__group {
    border: 0;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.filter-overlay__group legend,
.filter-overlay__group .label-caps {
    margin-bottom: 4px;
}

.filter-overlay label {
    font-size: var(--type-body-sm-size);
    color: var(--color-on-surface);
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    min-height: 24px;
}

.filter-overlay select {
    height: 36px;
    padding: 0 8px;
    border: 1px solid var(--color-outline);
    border-radius: var(--rounded-sm);
    background: var(--color-surface);
    font-family: var(--font-body);
}

.filter-overlay__group--rites {
    max-height: 160px;
    overflow-y: auto;
}

/* --- Empty state for filters (Story 3.6, UX-DR27 filter-empty) ---------- */

.map-empty-state {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 450;
    text-align: center;
    background: rgba(255, 255, 255, 0.95);
    padding: var(--space-gutter);
    border: var(--border-hairline);
    border-radius: var(--rounded-md);
    max-width: 320px;
}

.map-empty-state__reset {
    appearance: none;
    margin-top: var(--space-unit);
    border: 1px solid var(--color-primary);
    background: var(--color-surface);
    color: var(--color-primary);
    padding: 6px 14px;
    border-radius: var(--rounded-sm);
    cursor: pointer;
    font-family: var(--font-body);
    font-weight: 600;
}

/* --- Full-screen modal (Story 3.6, UX-DR4 mobile) ----------------------- */

.map-modal {
    position: fixed;
    inset: 0;
    background: var(--color-surface);
    z-index: 9000;
    display: none;
    flex-direction: column;
}

.map-modal--open { display: flex; }

.map-modal__close {
    align-self: flex-end;
    width: 44px;
    height: 44px;
    appearance: none;
    border: 0;
    background: transparent;
    font-size: 28px;
    line-height: 1;
    color: var(--color-on-surface);
    cursor: pointer;
}

.map-slot--full {
    flex: 1;
    width: 100%;
    height: auto;
    border-radius: 0;
    border: 0;
    display: block;
}

body.no-scroll { overflow: hidden; }

.landing-tiles {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-gutter);
    margin-bottom: var(--space-section-gap);
}

@media (min-width: 768px) {
    .landing-tiles {
        grid-template-columns: repeat(2, 1fr);
    }
}

.landing-tile {
    display: block;
    padding: var(--card-padding);
    background: var(--color-surface);
    border: var(--border-hairline);
    border-radius: var(--rounded-md);
    text-decoration: none;
    color: var(--color-on-surface);
    transition: box-shadow 150ms ease, transform 150ms ease;
}

@media (min-width: 768px) {
    .landing-tile:hover,
    .landing-tile:focus-visible {
        box-shadow: var(--shadow-hover);
        transform: translateY(-1px);
    }
}

.landing-tile__title {
    font-family: var(--font-display);
    font-size: var(--type-headline-md-size);
    line-height: var(--type-headline-md-line);
    font-weight: var(--type-headline-md-weight);
    color: var(--color-primary);
    margin: 0 0 var(--space-unit) 0;
}

.landing-tile__body {
    font-size: var(--type-body-md-size);
    line-height: var(--type-body-md-line);
    color: var(--color-on-surface-muted);
    margin: 0;
}

/* --- Fiche card (UX-DR7, Story 2.3) ------------------------------------- */

.fiche-card {
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: var(--space-gutter);
    align-items: start;
    padding: var(--card-padding);
    background: var(--color-surface);
    border: var(--border-hairline);
    border-radius: var(--rounded-md);
    color: var(--color-on-surface);
    text-decoration: none;
    transition: box-shadow 150ms ease, transform 150ms ease;
    /* Fill the grid cell so two cards in the same row line up at equal
       height, regardless of which one has a longer name or subtitle.
       The parent .geo-page__list already uses CSS Grid 1fr 1fr; this
       just guarantees the card stretches into the cell vertically. */
    height: 100%;
}

.fiche-card__body {
    /* Flex column so the badges row can margin-top:auto itself to the
       bottom of the card — uniform card heights look better when the
       badge clusters line up across the row instead of floating after
       a 1-line vs 2-line title/subtitle. align-self overrides the
       parent .fiche-card's align-items:start so the body fills the
       full grid cell height. */
    display: flex;
    flex-direction: column;
    min-width: 0;  /* prevents long names from blowing out the grid cell */
    align-self: stretch;
}

.fiche-card__badges {
    margin-top: auto;
    padding-top: var(--space-unit);
}

/* Country tiles on /europe/ etc. reuse .fiche-card markup but omit the
   blason <img> — when no .fiche-card__blason child is present, collapse
   to a single column so the body text gets the full card width instead
   of being stuck in the leftmost 48px column. */
.fiche-card:not(:has(.fiche-card__blason)) {
    grid-template-columns: 1fr;
}

/* Greyed-out continent card on /regions/ when no active fiche exists
   for that region yet. Not a link (div, not anchor) — visually present
   so the world coverage stays geographically complete, but visually
   distinct so the visitor doesn't waste a click. */
.fiche-card--empty {
    background: var(--color-surface-container);
    color: var(--color-on-surface-muted);
    cursor: not-allowed;
    opacity: 0.7;
}
.fiche-card--empty:hover,
.fiche-card--empty:focus-visible {
    box-shadow: none;
    transform: none;
}

@media (min-width: 768px) {
    .fiche-card:hover,
    .fiche-card:focus-visible {
        box-shadow: var(--shadow-hover);
        transform: translateY(-1px);
    }
}

/* Même langage que le médaillon de l'infobox, en petit. */
.fiche-card__blason {
    width: 48px;
    height: 48px;
    border-radius: var(--rounded-full);
    background: var(--color-surface-warm);
    padding: 5px;
    object-fit: contain;
    border: var(--border-hairline-soft);
}

.fiche-card__name {
    font-family: var(--font-display);
    font-size: var(--type-headline-sm-size);
    line-height: var(--type-headline-sm-line);
    font-weight: var(--type-headline-sm-weight);
    color: var(--color-primary);
    margin: 0 0 2px 0;
    /* Cap very long official names (e.g. "Fédération française du Droit
       humain de l'Ordre maçonnique mixte international le Droit humain")
       at 2 lines so cards line up at a consistent height in the grid. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.fiche-card__description {
    /* Clamp descriptions to 2 lines. Cards are scan surfaces — anything
       longer than one short sentence ("Première obédience mixte, 1893")
       turns the grid into a wall of prose. Pairs with the first-sentence
       extraction + 110-char word-boundary cap in fiche_card.tpl.php. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.fiche-card__acronym {
    margin: 0 0 var(--space-unit) 0;
}

.fiche-card__description {
    font-size: var(--type-body-sm-size);
    line-height: var(--type-body-sm-line);
    color: var(--color-on-surface-muted);
    margin: 0 0 var(--space-unit) 0;
}

.fiche-card__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* --- Region & country index pages (UX-DR4, Story 2.2) -------------------- */

.geo-page {
    padding-top: var(--space-gutter);
}

/* Page-intro typography keeps the .longform reading column width but
   stays anchored to the left edge under the H1. The bare .longform
   utility centres itself (margin-inline: auto) which is correct for
   article body copy but reads as a misalignment when an intro paragraph
   appears under a left-flush page heading. Override here, plus the
   inline `<p class="longform">` cases that sit directly inside a
   .geo-page__header in regions.php and mises_a_jour.php.

   The bottom margin gives the intro room to breathe before the card
   grid below — the default --space-section-gap-mobile (48px) felt
   "collé" against the cards on desktop, so the desktop breakpoint
   bumps it to 80px. */
.geo-page__header h1 {
    margin: 0 0 calc(var(--space-unit) * 2) 0;
}
.geo-page__intro,
.geo-page__header .longform {
    margin-inline: 0;
    margin-bottom: var(--space-section-gap-mobile);
}
@media (min-width: 768px) {
    .geo-page__intro,
    .geo-page__header .longform {
        margin-bottom: 80px;
    }
}

.geo-page__body {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-section-gap-mobile);
}

@media (min-width: 1024px) {
    .geo-page__body {
        grid-template-columns: 1fr minmax(260px, 300px);
        gap: var(--space-section-gap);
    }
    .geo-page__body .infobox {
        order: 2;
        position: sticky;
        top: var(--space-gutter);
        align-self: start;
    }
    .geo-page__list {
        order: 1;
    }
}

.geo-page__list {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-gutter);
}

@media (min-width: 768px) {
    .geo-page__list {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* --- Related obediences block (UX-DR19, Story 2.4) ----------------------- */

.related-block {
    margin-top: var(--space-section-gap-mobile);
    padding-top: var(--space-gutter);
    border-top: var(--border-hairline-soft);
}

.related-block__list {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-gutter);
    margin-top: var(--space-gutter);
}

@media (min-width: 768px) {
    .related-block__list {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* --- Right-of-reply block (UX-DR20) ------------------------------------- */

.right-of-reply {
    margin-top: var(--space-section-gap-mobile);
    padding: var(--space-gutter);
    background: var(--color-surface-warm);
    border-radius: var(--rounded-md);
    border: var(--border-hairline-soft);
}

/* =============================================================================
   8. Responsive breakpoints
   =============================================================================
   Mobile-first base above; tablet and desktop overrides below.
*/

/* --- Tablet (768px+) ------------------------------------------------------ */
@media (min-width: 768px) {
    .container {
        padding-left: var(--space-margin-desktop);
        padding-right: var(--space-margin-desktop);
    }

    h1 {
        font-size: var(--type-display-lg-size);
        line-height: var(--type-display-lg-line);
        letter-spacing: var(--type-display-lg-tracking);
    }

    main {
        padding-top: var(--space-section-gap);
        padding-bottom: var(--space-section-gap);
    }
}

/* --- Desktop (1024px+) ---------------------------------------------------- */
@media (min-width: 1024px) {
    body {
        font-size: var(--type-body-md-size);
    }
}

/* =============================================================================
   9. Reduced motion (UX-DR29)
   ============================================================================= */

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

    .skip-link {
        transition: none;
    }
}

/* =============================================================================
   10. Print stylesheet (UX-DR30)
   ============================================================================= */

@media print {
    /* Hide chrome */
    .td-topbar,
    .td-header,
    .td-footer,
    .secondary-band,
    .skip-link,
    nav,
    .no-print {
        display: none !important;
    }

    body {
        background: white;
        color: black;
        font-family: var(--font-longform);
        font-size: 11pt;
        line-height: 1.5;
    }

    h1, h2, h3 {
        font-family: var(--font-longform);
        page-break-after: avoid;
    }

    a {
        color: black;
        text-decoration: underline;
    }

    /* Show source URLs in print */
    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 9pt;
        color: #555;
    }

    /* No background-color on the marker spans in print */
    .marker {
        background: none;
    }

    @page {
        margin: 2cm;
    }
}

/* =============================================================================
   Admin surface (Story 6.1+)
   ============================================================================= */

body.admin {
    background: var(--color-surface-warm);
    font-family: var(--font-body);
    color: var(--color-on-surface);
}

.admin-bar {
    background: var(--color-primary);
    color: var(--color-on-primary);
    border-bottom: 4px solid var(--color-accent);
}

.admin-bar__inner {
    display: flex;
    align-items: center;
    gap: var(--space-gutter);
    max-width: var(--space-container-wide, 1440px);
    margin: 0 auto;
    padding: 12px var(--space-gutter);
}

.admin-bar__brand {
    color: var(--color-on-primary);
    text-decoration: none;
    font-weight: 600;
    font-size: var(--type-body-md-size);
}

.admin-bar__nav {
    display: flex;
    gap: var(--space-gutter);
    flex: 1;
}

.admin-bar__nav a {
    color: var(--color-on-primary);
    text-decoration: none;
    font-size: var(--type-body-sm-size);
    opacity: 0.85;
}

.admin-bar__nav a:hover,
.admin-bar__nav a:focus-visible {
    opacity: 1;
    text-decoration: underline;
}

.admin-bar__actor {
    display: flex;
    align-items: center;
    gap: var(--space-unit);
}

.admin-bar__email {
    font-size: var(--type-body-sm-size);
    opacity: 0.85;
}

.admin-bar__logout-form {
    margin: 0;
}

.btn--sm {
    padding: 4px 10px;
    font-size: var(--type-caption-size);
}

.admin-main {
    padding-top: var(--space-section-gap-mobile);
    padding-bottom: var(--space-section-gap);
}

.admin-container {
    max-width: var(--space-container-wide, 1440px);
    margin: 0 auto;
    padding: 0 var(--space-gutter);
}

.admin-flash {
    max-width: var(--space-container-wide, 1440px);
    margin: 0 auto;
    padding: var(--space-unit) var(--space-gutter) 0;
}

.admin-flash__item {
    padding: var(--space-unit) var(--space-gutter);
    border-radius: var(--rounded-sm);
    margin: 0 0 8px 0;
}

.admin-flash__item--success {
    background: rgba(63, 107, 58, 0.12);
    border-left: 4px solid var(--color-success);
}

.admin-flash__item--error {
    background: rgba(164, 48, 44, 0.12);
    border-left: 4px solid var(--color-danger);
}

.admin-flash__item--info {
    background: var(--color-surface-container);
    border-left: 4px solid var(--color-primary);
}

/* Login */

.admin-login {
    max-width: 480px;
    margin: var(--space-section-gap) auto;
    padding: var(--space-section-gap-mobile) var(--space-gutter);
    background: var(--color-surface);
    border-radius: var(--rounded-lg);
    box-shadow: var(--shadow-hover);
}

.admin-login h1 {
    margin-top: 0;
    font-family: var(--font-display);
    color: var(--color-primary);
}

.admin-login__error {
    padding: var(--space-unit) var(--space-gutter);
    background: rgba(164, 48, 44, 0.12);
    border-left: 4px solid var(--color-danger);
    border-radius: var(--rounded-sm);
    color: var(--color-on-surface);
    font-size: var(--type-body-sm-size);
}

.admin-login__form {
    display: flex;
    flex-direction: column;
    gap: var(--space-gutter);
}

/* Generic admin form fields (used by login, obedience CRUD, etc.) */

.admin-form__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.admin-form__field label {
    font-size: var(--type-body-sm-size);
    font-weight: 600;
    color: var(--color-on-surface);
}

.admin-form__field input[type="text"],
.admin-form__field input[type="email"],
.admin-form__field input[type="password"],
.admin-form__field input[type="number"],
.admin-form__field input[type="url"],
.admin-form__field select,
.admin-form__field textarea {
    width: 100%;
    height: var(--field-height);
    padding: 0 var(--field-padding);
    border: 1px solid var(--color-outline);
    border-radius: var(--rounded-sm);
    background: var(--color-surface);
    font-family: var(--font-body);
    font-size: var(--type-body-md-size);
}

.admin-form__field textarea {
    height: auto;
    min-height: 120px;
    padding: var(--space-unit) var(--field-padding);
    resize: vertical;
}

.admin-form__field input:focus-visible,
.admin-form__field select:focus-visible,
.admin-form__field textarea:focus-visible {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 2px;
    border-color: var(--color-primary);
}

.admin-form__field-help {
    font-size: var(--type-caption-size);
    color: var(--color-on-surface-muted);
}

.admin-form__field-error {
    font-size: var(--type-caption-size);
    color: var(--color-danger);
}

.admin-form__actions {
    display: flex;
    gap: var(--space-unit);
    margin-top: var(--space-gutter);
}

/* Dashboard tiles */

.admin-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-gutter);
    margin-bottom: var(--space-section-gap-mobile);
}

.admin-tile {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: var(--card-padding);
    background: var(--color-surface);
    border: var(--border-hairline);
    border-radius: var(--rounded-md);
    text-decoration: none;
    color: var(--color-on-surface);
    transition: box-shadow 150ms ease;
}

.admin-tile:hover,
.admin-tile:focus-visible {
    box-shadow: var(--shadow-hover);
}

.admin-tile__count {
    font-family: var(--font-display);
    font-size: var(--type-display-md-size);
    line-height: 1;
    color: var(--color-primary);
}

.admin-tile__label {
    font-size: var(--type-body-sm-size);
    color: var(--color-on-surface-muted);
}

.admin-quick-actions {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-unit);
}

.admin-quick-actions a {
    display: inline-block;
    padding: 8px 14px;
    background: var(--color-surface);
    border: var(--border-hairline);
    border-radius: 9999px;
    color: var(--color-primary);
    text-decoration: none;
    font-size: var(--type-body-sm-size);
    font-weight: 500;
}

.admin-quick-actions a:hover,
.admin-quick-actions a:focus-visible {
    background: var(--color-surface-warm);
}

/* Admin list tables (used by Stories 6.2/6.6/7.3) */

.admin-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-surface);
    border: var(--border-hairline);
    border-radius: var(--rounded-md);
    overflow: hidden;
}

.admin-table th,
.admin-table td {
    padding: 10px var(--space-gutter);
    text-align: left;
    border-bottom: 1px solid var(--color-outline-soft);
    font-size: var(--type-body-sm-size);
}

.admin-table tr:last-child td {
    border-bottom: 0;
}

.admin-table th {
    background: var(--color-surface-warm);
    font-weight: 600;
    color: var(--color-on-surface);
}

.admin-table tr:hover td {
    background: var(--color-surface-warm);
}

.admin-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-gutter);
    margin-bottom: var(--space-gutter);
}

.admin-toolbar__filters {
    display: flex;
    gap: var(--space-unit);
    align-items: center;
}

.admin-status-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 9999px;
    font-size: var(--type-caption-size);
    font-weight: 600;
}

.admin-status-badge--active   { background: rgba(63, 107, 58, 0.18); color: #2C5028; }
.admin-status-badge--pending  { background: rgba(176, 140, 79, 0.22); color: #6E5320; }
.admin-status-badge--inactive { background: var(--color-surface-container-high); color: var(--color-on-surface-muted); }

/* Diff renderer (Story 6.6) */

.admin-diff {
    font-family: var(--font-mono);
    font-size: var(--type-caption-size);
    background: var(--color-surface);
    border: var(--border-hairline);
    border-radius: var(--rounded-sm);
    padding: var(--space-unit);
    margin-bottom: var(--space-unit);
}

.admin-diff__field {
    margin-bottom: var(--space-unit);
}

.admin-diff__label {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: var(--type-body-sm-size);
    margin-bottom: 4px;
    color: var(--color-on-surface);
}

.admin-diff__before,
.admin-diff__after {
    padding: 4px 8px;
    border-radius: 4px;
    white-space: pre-wrap;
    word-break: break-word;
}

.admin-diff__before {
    background: rgba(164, 48, 44, 0.08);
    color: var(--color-on-surface);
    text-decoration: line-through;
    text-decoration-color: var(--color-danger);
}

.admin-diff__after {
    background: rgba(63, 107, 58, 0.12);
    color: var(--color-on-surface);
}