:root {
    /* ---- Couleurs de base ---- */
    --white: #ffffff;
    --black: #0b0b0c;
    /* texte sombre / fond très foncé */
    --transparent: transparent;

    /* Neutres adaptés aux surfaces sombres */
    --neutral-50: #0f1115;
    --neutral-75: #111318;
    --neutral-100: #141821;
    /* surface de base (cards, inputs) */
    --neutral-150: #171b24;
    --neutral-200: #1a1f2a;
    /* bordures douces */
    --neutral-250: #1e2430;
    /* séparateurs */
    --neutral-300: #252c39;
    --neutral-350: #2b3443;
    --neutral-400: #687385;
    --neutral-450: #8d98aa;
    /* muted text */
    --neutral-500: #aab3c2;
    --neutral-600: #c2cad6;
    --neutral-650: #d2d8e1;
    --neutral-700: #e2e6ec;
    --neutral-750: #eef1f5;
    --neutral-800: #f7f8fa;
    /* inverse utilitaire (rare) */
    --neutral-900: #ffffff;
    /* inverse utilitaire (rare) */

    /* Palette thématique */
    --primary-500: #1f2937;
    --primary-600: #111827;
    --danger-500: #ef4444;
    --danger-600: #dc2626;
    --red-500: #ef4444;
    --indigo-50: #eef2ff;
    --indigo-200: #c7d2fe;
    --sky-100: #e0f2fe;
    --sky-300: #7dd3fc;
    --sky-300-soft: #93c5fd;
    --violet-600: #7c3aed;
    --emerald-600: #059669;
    --emerald-600-alt: #16a34a;

    /* ---- Typo ---- */
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

    /* ---- Rayons, ombres, contours ---- */
    --radius-2xs: 0.3rem;
    --radius-xs: 0.375rem;
    --radius-sm: 0.5rem;
    --radius-md: 0.75rem;
    --radius-lg: 0.9999rem;
    /* pills */

    --shadow-xxs: 0 1px 0 rgba(0, 0, 0, 0.45);
    --shadow-xs: 0 2px 8px rgba(0, 0, 0, 0.45);
    --shadow-sm: 0 3px 16px rgba(0, 0, 0, 0.40);
    --shadow-hover: 0 10px 26px rgba(0, 0, 0, 0.5);
    --shadow-focus-ring: 0 0 0 3px rgba(99, 102, 241, 0.45);

    /* ---- Espacements ---- */
    --space-0: 0;
    --space-1: 0.15rem;
    --space-2: 0.25rem;
    --space-3: 0.3rem;
    --space-4: 0.35rem;
    --space-5: 0.375rem;
    --space-6: 0.5rem;
    --space-7: 0.55rem;
    --space-8: 0.6rem;
    --space-9: 0.65rem;
    --space-10: 0.7rem;
    --space-12: 0.75rem;
    --space-14: 0.8rem;
    --space-16: 0.875rem;
    --space-18: 1rem;
    --space-20: 1.1rem;
    --space-22: 1.25rem;
    --space-24: 1.4rem;
    --space-25: 1.5rem;
    --space-28: 1.6rem;
    --space-30: 1.75rem;
    --space-32: 2rem;
    --space-34: 2.2rem;
    --space-36: 2.4rem;

    /* ---- Tailles ---- */
    --size-xxs: 0.75rem;
    /* 12px */
    --size-xs: 0.875rem;
    /* 14px */
    --size-sm: 1rem;
    /* 16px */
    --size-md: 1.1rem;
    /* 17-18px */
    --size-lg: 1.25rem;
    /* 20px */
    --size-xl: 1.5rem;
    /* 24px */
    --size-2xl: 1.875rem;
    /* 30px */
    --size-3xl: 2rem;
    /* 32px */
    --size-4xl: 2.5rem;
    /* 40px */
    --badge-min: 1.25rem;
    --dot: 0.75rem;
    --line-2px: 2px;
    --leaflet-h: 480px;
    --sidebar-top: 1rem;

    /* ---- Interlignage & poids ---- */
    --leading-tight: 1.15;
    --leading-snug: 1.2;
    --leading-relaxed: 1.65;
    --weight-600: 600;
    --weight-700: 700;
    --weight-800: 800;

    /* ---- Transitions & transform ---- */
    --easing-fast: all 0.15s ease;
    --translate-1px: -1px;
    --translate-2px: -2px;

    /* ---- Boutons (hérite de l'existant) ---- */
    --btn-bg: var(--primary-500);
    --btn-hover-bg: var(--primary-600);
    --btn-fg: var(--white);
    --btn-outline-bg: var(--transparent);
    --btn-outline-fg: var(--white);
    --btn-outline-border: var(--neutral-300);
    --btn-destructive-bg: var(--danger-500);
    --btn-destructive-hover: var(--danger-600);
    --btn-destructive-fg: var(--white);
    --btn-disabled-bg: var(--neutral-100);
    --btn-disabled-fg: var(--neutral-400);
    --btn-radius: var(--radius-sm);
    --btn-padding-y: var(--space-6);
    --btn-padding-x: var(--space-18);
    --btn-outline-fg: var(--white);

    /* ---- Composants (tokens) ---- */
    --badge-bg: var(--red-500);
    --badge-fg: var(--white);

    --card-bg: var(--neutral-100);
    --card-border: var(--neutral-200);
    --card-shadow: var(--shadow-xxs);

    --link-on-light: var(--white);
    --link-color: #2563eb;

    --form-bg: var(--neutral-100);
    --form-fg: var(--white);
    --form-border: var(--neutral-200);
    --form-focus-ring: var(--shadow-focus-ring);
    --form-focus-border: #93c5fd;

    --code-bg: var(--neutral-150);
    --blockquote-border: var(--neutral-300);
    --blockquote-fg: var(--neutral-450);
    --hr-border: var(--neutral-250);

    --light-button-border: rgba(255, 255, 255, 0.25);
    --light-button-hover-bg: rgba(255, 255, 255, 0.1);

    --hover-bg-verylight: var(--neutral-75);
    --hover-bg-light: var(--neutral-100);

    --mini-line: var(--neutral-300);
    --mini-dot: var(--white);
    --mini-dot-ring: #0f1115;

    --chip-bg: #1a2231;
    --chip-border: #2a3550;
    --chip-text: var(--white);
    --chip-hover-border: #4460c8;
    --chip-hover-bg: #1d2a45;

    --type-badge-bg: #1a2231;
    --type-badge-border: #2a3550;
    --type-badge-fg: var(--white);

    --cal-pill-bg: var(--sky-100);
    --cal-pill-border: var(--sky-300);
    --cal-pill-fg: var(--black);

    --cal-list-hover: rgba(255, 255, 255, 0.03);

    --calovw-card-border: #1e2430;
    --calovw-shadow: var(--shadow-sm);
    --calovw-flag: #c8b48a;
    --calovw-muted: #9aa3b2;
    --calovw-lighter: #ccd2db;

    --muted-fg: var(--neutral-450);

    --ring: var(--shadow-focus-ring);

    /* Defaults dynamiques (fallBacks) pour badges "era"/"season" */
    --era-color-default: var(--violet-600);
    --season-color-default: var(--emerald-600);
    --season-pill-default: var(--emerald-600-alt);

    /* Color-mix besoin de blanc */
    --mix-base: var(--white);

    /* ---- Compat utilités HTML (bg-[var(--...)] / text-[var(--...)]) ---- */
    --bg-header: #0f1218;
    --bg-footer: #0d1016;
    --text-on-dark: var(--white);

    /* Color-mix base (utilisée pour season/era) */
    --mix-base: #0f1115;

    --bg: var(--neutral-75);
    --text: var(--white);
}

/* =====================
   Focus visible
===================== */
:where(a, button, input, [tabindex]):focus-visible {
    outline: none;
    box-shadow: var(--ring);
    border-radius: var(--radius-sm);
}

/* =====================
   Breadcrumbs
===================== */
.breadcrumbs a+a::before {
    content: "/";
    opacity: 0.5;
    margin: 0 var(--space-12);
}

/* =====================
   Badge notif
===================== */
.badge {
    display: inline-flex;
    min-width: var(--badge-min);
    height: var(--badge-min);
    align-items: center;
    justify-content: center;
    font-size: var(--size-xxs);
    font-weight: var(--weight-700);
    line-height: 1;
    border-radius: var(--radius-lg);
    background: var(--badge-bg);
    color: var(--badge-fg);
    padding: 0 var(--space-2);
}

/* =====================
   Sidebar sticky
===================== */
.layout__sidebar {
    position: sticky;
    top: var(--sidebar-top);
    gap: var(--space-5);
    align-self: start;
}

/* ====================
   Header
===================== */


header .container {
    flex-wrap: wrap;
}

header .ml-auto {
    flex-wrap: wrap;
    gap: 0.75rem;
}

@media (max-width: 640px) {
    header .container {
        flex-wrap: wrap;
    }

    header nav.breadcrumbs {
        order: 3;
        width: 100%;
        margin-top: 0.25rem;
    }

    header form[role="search"] {
        order: 4;
        flex: 1 0 100%;
        /* full row, don't shrink to 0 */
        width: 100%;
        margin-top: 0.25rem;
    }

    header form[role="search"] input[type="search"] {
        width: 100%;
        /* override w-44 / sm:w-56 */
    }
}


/* =====================
   Images contenu
===================== */
.page-content img {
    max-width: 100%;
    height: auto;
}

/* =====================
   Listes enfants
===================== */
.child-list {
    list-style: none;
    padding-left: var(--space-0);
}

.child-list li {
    margin: var(--space-5) 0;
}

/* =====================
   Leaflet intégré
===================== */
.leaflet-container-embedded {
    width: 100%;
    height: var(--leaflet-h);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xs);
    overflow: hidden;
    margin: var(--space-32) 0;
}

/* =====================
   Utilitaires
===================== */
.u-collapsed {
    display: none;
}

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

form input[type="text"],
form input[type="search"],
form input[type="url"],
form input[type="number"],
form textarea,
form select {
    width: 100%;
    border: 1px solid var(--form-border);
    border-radius: var(--radius-sm);
    padding: var(--space-6) var(--space-12);
    background: var(--form-bg);
    color: var(--form-fg);
}

/* =====================
   Boutons
===================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-6);
    font-weight: 500;
    font-size: var(--size-xs);
    line-height: 1.25rem;
    /* métrique de ligne: gardée par valeur absolue via taille */
    border-radius: var(--btn-radius);
    padding: var(--btn-padding-y) var(--btn-padding-x);
    transition: var(--easing-fast);
    cursor: pointer;
    border: 1px solid transparent;
}

.btn-primary {
    background-color: var(--btn-bg);
    color: var(--btn-fg);
    border-color: var(--btn-bg);
}

.btn-primary:hover {
    background-color: var(--btn-hover-bg);
}

.btn-outline {
    background-color: var(--btn-outline-bg);
    color: var(--btn-outline-fg);
    border-color: var(--btn-outline-border);
}

.btn-outline:hover {
    background-color: var(--neutral-100);
}

.btn-ghost {
    background-color: var(--transparent);
    color: var(--btn-outline-fg);
}

.btn-ghost:hover {
    background-color: var(--neutral-100);
}

.btn-destructive {
    background-color: var(--btn-destructive-bg);
    color: var(--btn-destructive-fg);
    border-color: var(--btn-destructive-bg);
}

.btn-destructive:hover {
    background-color: var(--btn-destructive-hover);
}

.btn-disabled,
.btn:disabled {
    background-color: var(--btn-disabled-bg);
    color: var(--btn-disabled-fg);
    cursor: not-allowed;
    border-color: var(--transparent);
}

.btn-sm {
    padding: var(--space-2) var(--space-12);
    font-size: var(--size-xxs);
}

.btn-light {
    background: var(--transparent);
    color: var(--white);
    border: 1px solid var(--light-button-border);
}

.btn-light:hover {
    background: var(--light-button-hover-bg);
}

/* =====================
   Base lisibilité
===================== */
html {
    scroll-behavior: smooth;
}

body {
    font-size: var(--size-sm);
    line-height: var(--leading-relaxed);
}

/* =====================
   Titres hors .prose
===================== */
h1 {
    font-size: clamp(var(--size-2xl), 2vw + 1rem, var(--size-4xl));
    font-weight: var(--weight-700);
    line-height: var(--leading-snug);
}

h2 {
    font-size: clamp(var(--size-xl), 1.2vw + 1rem, var(--size-3xl));
    font-weight: var(--weight-700);
    line-height: 1.25;
    margin-top: var(--space-22);
}

h3 {
    font-size: var(--size-lg);
    font-weight: var(--weight-600);
    line-height: 1.35;
    margin-top: var(--space-18);
}

/* =====================
   Typography (.prose)
===================== */
.prose {
    max-width: 72ch;
}

.prose :where(p, ul, ol, blockquote) {
    margin-top: 0.8em;
    margin-bottom: 0.8em;
}

.prose :where(h1, h2) {
    margin-top: 1.25em;
    margin-bottom: 0.6em;
}

.prose :where(h3, h4) {
    margin-top: 1.1em;
    margin-bottom: 0.5em;
}

.prose h1 {
    font-size: clamp(var(--size-3xl), 2.4vw + 1rem, 2.75rem);
    font-weight: var(--weight-800);
    line-height: var(--leading-tight);
}

.prose h2 {
    font-size: clamp(var(--size-xl), 1.4vw + 1rem, var(--size-3xl));
    font-weight: var(--weight-700);
}

.prose h3 {
    font-size: var(--size-lg);
    font-weight: var(--weight-600);
}

.prose strong {
    font-weight: var(--weight-700);
}

.prose hr {
    border-color: var(--hr-border);
    margin: var(--space-32) 0;
}

.prose blockquote {
    font-style: italic;
    border-left: 4px solid var(--blockquote-border);
    padding-left: var(--space-18);
    color: var(--blockquote-fg);
}

.prose code {
    background: var(--code-bg);
    border-radius: var(--radius-xs);
    padding: var(--space-1) var(--space-4);
}

.prose pre {
    border-radius: var(--radius-sm);
    padding: var(--space-18);
}

/* =====================
   Cards
===================== */
.card {
    border: 1px solid var(--card-border);
    border-radius: var(--radius-md);
    background: var(--card-bg);
    box-shadow: var(--card-shadow);
}

.card--hover:hover {
    box-shadow: var(--shadow-hover);
    transform: translateY(var(--translate-1px));
    transition: var(--easing-fast);
}

/* =====================
   Sections
===================== */
.section {
    margin-top: var(--space-22);
}

.section+.section {
    margin-top: var(--space-32);
}

/* =====================
   Lists utilitaires
===================== */
.list-clean {
    list-style: none;
    padding: var(--space-0);
    margin: var(--space-0);
}

.list-divider>li+li {
    border-top: 1px solid var(--card-border);
}

/* =====================
   Focus formulaire
===================== */
form :where(input, textarea, select):focus {
    outline: none;
    box-shadow: var(--form-focus-ring);
    border-color: var(--form-focus-border);
}

/* =====================
   Relations
===================== */
.relations h2 {
    scroll-margin-top: 5rem;
}

.relations-list li {
    transition: background 0.15s ease, transform 0.15s ease;
}

.relations-list li:hover {
    background: var(--hover-bg-verylight);
    transform: translateY(var(--translate-1px));
}

.rel-desc {
    font-size: var(--size-xs);
    color: var(--neutral-500);
}

/* =====================
   Chips (tag)
===================== */
.tag-chip {
    --_bg: var(--chip-bg);
    --_border: var(--chip-border);
    --_text: var(--chip-text);
    display: inline-flex;
    align-items: center;
    gap: var(--space-5);
    height: 2rem;
    padding: 0 var(--space-12);
    border-radius: var(--radius-lg);
    border: 1px solid var(--_border);
    background: var(--_bg);
    color: var(--_text);
    text-decoration: none;
    font-size: var(--size-xs);
    font-weight: var(--weight-600);
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, background 0.15s ease;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03);
}

.tag-chip:hover {
    transform: translateY(var(--translate-1px));
    border-color: var(--chip-hover-border);
    background: var(--chip-hover-bg);
}

/* =====================
   Chroniques
===================== */
.chron-meta .chron-date {
    white-space: nowrap;
}

/* =====================
   Card light
===================== */
.card--light {
    background: var(--white) !important;
    color: var(--black);
    border-color: var(--card-border);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03);
}

.card--light .prose {
    color: inherit;
}

/* =====================
   Texte adouci
===================== */
.muted {
    color: var(--muted-fg);
}

/* =====================
   Type badge
===================== */
.type-badge {
    display: inline-flex;
    align-items: center;
    height: 1.75rem;
    padding: 0 var(--space-10);
    border-radius: var(--radius-lg);
    background: var(--type-badge-bg);
    border: 1px solid var(--type-badge-border);
    color: var(--type-badge-fg);
    font-size: var(--size-xxs);
    font-weight: var(--weight-600);
    line-height: 1;
    white-space: nowrap;
}

.cal-title a {
    color: var(--link-on-light);
}

.cal-desc :where(h1, h2, h3) {
    margin-top: var(--space-18);
}

/* =====================
   Mini timeline
===================== */
.mini-timeline {
    position: relative;
}

.mini-timeline .mt-line {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--space-6);
    width: var(--line-2px);
    background: var(--mini-line);
}

.mini-timeline .mt-item {
    position: relative;
}

.mini-timeline .mt-dot {
    position: relative;
    top: var(--space-5);
    min-width: var(--dot);
    height: var(--dot);
    border-radius: var(--radius-lg);
    background: var(--mini-dot);
    display: inline-block;
    box-shadow: 0 0 0 3px var(--mini-dot-ring);
}

.mini-timeline .mt-label {
    flex: 1;
}

.cal-link-list li {
    transition: background 0.15s ease, transform 0.15s ease;
}

.cal-link-list li:hover {
    background: var(--neutral-75);
    transform: translateY(var(--translate-1px));
}

.cal-pill {
    display: inline-flex;
    align-items: center;
    height: 1.75rem;
    padding: 0 var(--space-10);
    border-radius: var(--radius-lg);
    background: var(--cal-pill-bg);
    border: 1px solid var(--cal-pill-border);
    color: var(--cal-pill-fg);
    font-size: var(--size-xxs);
    font-weight: var(--weight-700);
    line-height: 1;
}

.cal-date {
    font-family: var(--font-mono);
    font-size: var(--size-xs);
    color: var(--neutral-650);
}

.cal-see {
    text-decoration: none;
}

/* =====================
   Calendar list look
===================== */
.cal-item {
    transition: background 0.15s ease, transform 0.15s ease;
}

.cal-item:hover {
    background: var(--cal-list-hover);
    transform: translateY(var(--translate-1px));
}

.cal-when {
    white-space: nowrap;
}

/* =====================
   Era badge
===================== */
.era-badge {
    --era-color: var(--era-color, var(--era-color-default));
    display: inline-flex;
    align-items: center;
    height: 1.6rem;
    padding: 0 var(--space-10);
    border-radius: var(--radius-lg);
    border: 1px solid var(--era-color);
    color: var(--era-color);
    background: var(--mix-base);
    font-size: var(--size-xxs);
    font-weight: var(--weight-700);
    line-height: 1;
    letter-spacing: 0.01em;
}

/* =====================
   Season badge
===================== */
.season-badge {
    --season-color: var(--season-color, var(--season-color-default));
    display: inline-flex;
    align-items: center;
    gap: var(--space-4);
    height: 1.6rem;
    padding: 0 var(--space-10);
    border-radius: var(--radius-lg);
    border: 1px solid var(--season-color);
    background: color-mix(in srgb, var(--season-color) 18%, var(--mix-base));
    color: var(--neutral-900);
    font-size: var(--size-xxs);
    font-weight: var(--weight-700);
    line-height: 1;
}

/* =====================
   Calendar overview
===================== */
.calovw-card {
    background: var(--card-bg);
    border: 1px solid var(--calovw-card-border);
    border-radius: 12px;
    padding: 14px;
    margin: 16px 0;
    box-shadow: var(--calovw-shadow);
}

.calovw-months {
    list-style: none;
    padding-left: var(--space-0);
}

.calovw-months li {
    display: flex;
    gap: 10px;
    align-items: baseline;
    padding: 4px 0;
}

.m-order {
    color: var(--calovw-muted);
    width: 28px;
    text-align: right;
}

.m-name {
    font-weight: var(--weight-600);
}

.m-len {
    color: var(--calovw-lighter);
}

.m-flag {
    margin-left: 6px;
    font-size: 0.8rem;
    color: var(--calovw-flag);
}

.calovw-seasons,
.calovw-eras {
    list-style: none;
    padding-left: var(--space-0);
}

.calovw-seasons li,
.calovw-eras li {
    margin: 6px 0;
}

.season-segs {
    align-items: center;
    justify-content: center;
}

.season-segs .seg {
    color: var(--neutral-600);
}

.current-date {
    font-size: var(--size-md);
    font-weight: var(--weight-700);
}

.current-date .season {
    font-weight: var(--weight-600);
}

.badge-soft {
    display: inline-flex;
    align-items: center;
    height: 1.5rem;
    padding: 0 var(--space-10);
    border-radius: var(--radius-lg);
    background: var(--neutral-150);
    border: 1px solid var(--neutral-200);
    font-size: var(--size-xxs);
    font-weight: var(--weight-600);
    line-height: 1;
}

/* Ajustements */
.calovw-months .m-order {
    width: 2ch;
    text-align: right;
}

.calovw-seasons .seg {
    white-space: nowrap;
}

.season-pill {
    --season-color: var(--season-color, var(--season-pill-default));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-6);
    padding: var(--space-3) var(--space-12);
    border-radius: var(--radius-lg);
    border: 1px solid var(--season-color);
    background: color-mix(in srgb, var(--season-color) 20%, var(--mix-base));
    color: var(--neutral-900);
    font-weight: var(--weight-600);
    font-size: var(--size-xs);
    line-height: 1.25rem;
    white-space: nowrap;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03);
}

.season-pill .season-name {
    color: var(--neutral-900);
}

.calovw-seasons li {
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.calovw-seasons li:hover {
    transform: translateY(var(--translate-2px));
    background: var(--neutral-75);
}

a.external-link {
    color: var(--link-color);
    text-decoration: underline;
}