/* ==========================================================================
   Maison de Cerf — Feuille de style principale
   Identité sobre et restreinte : bordeaux profond, blanc/ivoire, gris pierre
   anthracite. Pas de noir, pas de doré, pas de bleu (contrainte charte
   graphique). Header et footer en ivoire-deep.
   Police : Cormorant Garamond auto-hébergée (woff2, latin + latin-ext).
   ========================================================================== */

/* === POLICES AUTO-HÉBERGÉES === */
@font-face {
    font-family: 'Cormorant Garamond';
    font-style: normal;
    font-weight: 300 600;
    font-display: swap;
    src: url('/assets/fonts/cormorant-normal-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                   U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                   U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Cormorant Garamond';
    font-style: normal;
    font-weight: 300 600;
    font-display: swap;
    src: url('/assets/fonts/cormorant-normal-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                   U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                   U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Cormorant Garamond';
    font-style: italic;
    font-weight: 300 600;
    font-display: swap;
    src: url('/assets/fonts/cormorant-italic-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                   U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                   U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Cormorant Garamond';
    font-style: italic;
    font-weight: 300 600;
    font-display: swap;
    src: url('/assets/fonts/cormorant-italic-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                   U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                   U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* === DESIGN TOKENS === */
:root {
    /* Couleurs primaires — palette restreinte (3 couleurs + neutres) */
    --color-anthracite: #2e2a26;
    --color-anthracite-soft: #3a352f;
    --color-bordeaux: #6d1b2c;
    --color-bordeaux-light: #8a3142;
    --color-bordeaux-deep: #4a1019;
    --color-bordeaux-pale: #cf9aa8;
    --color-ivoire: #faf6ee;
    --color-ivoire-deep: #f0e9da;
    --color-pierre: #706a61;
    --color-pierre-light: #ddd5c4;
    --color-blanc: #ffffff;

    /* Couleurs sémantiques */
    --color-bg: var(--color-ivoire);
    --color-bg-alt: var(--color-ivoire-deep);
    --color-surface: var(--color-blanc);
    --color-text: var(--color-anthracite);
    --color-text-muted: var(--color-pierre);
    --color-accent: var(--color-bordeaux);
    --color-accent-strong: var(--color-bordeaux-light);
    --color-accent-pale: var(--color-bordeaux-pale);
    --color-border: var(--color-pierre-light);

    /* Origines généalogiques — 6 rameaux */
    --origin-flamande:    #5e6b42;
    --origin-fosseroule:  #9a5430;
    --origin-scherff:     #6b3f5e;
    --origin-donceel:     #6e623f;
    --origin-oultremont:  #7a3f51;
    --origin-glymes:      #49625c;

    --color-header-bg: var(--color-ivoire-deep);
    --color-header-text: var(--color-anthracite);
    --color-footer-bg: var(--color-ivoire-deep);
    --color-footer-text: var(--color-anthracite);

    /* Typographie */
    --font-serif: 'Cormorant Garamond', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, 'Iowan Old Style', 'Times New Roman', Times, serif;
    --font-sans: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

    --font-heading: var(--font-serif);
    --font-body: var(--font-sans);

    /* Échelle typographique (rapport ~1.25) */
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-md: 1.125rem;
    --text-lg: 1.375rem;
    --text-xl: 1.75rem;
    --text-2xl: 2.25rem;
    --text-3xl: 2.875rem;
    --text-4xl: 3.5rem;

    --leading-tight: 1.15;
    --leading-normal: 1.5;
    --leading-relaxed: 1.75;

    --tracking-wide: 0.04em;
    --tracking-wider: 0.12em;

    /* Espacements (échelle 8px) */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-8: 3rem;
    --space-10: 4rem;
    --space-12: 6rem;
    --space-16: 8rem;

    /* Mise en page */
    --container-max: 1180px;
    --container-padding: var(--space-6);
    --radius-sm: 2px;
    --radius-md: 4px;

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;

    /* Ombres (sobres, pas d'effet "gadget") */
    --shadow-sm: 0 1px 2px rgba(46, 42, 38, 0.07);
    --shadow-md: 0 4px 16px rgba(46, 42, 38, 0.10);
    --shadow-lg: 0 12px 32px rgba(46, 42, 38, 0.14);

    --header-height: 180px;
}

/* === RESET / NORMALIZE MINIMAL === */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd {
    margin: 0;
}

ul[class],
ol[class] {
    margin: 0;
    padding: 0;
    list-style: none;
}

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

a {
    color: inherit;
    text-decoration: none;
}

button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    cursor: pointer;
}

input,
textarea,
select {
    font: inherit;
    color: inherit;
}

table {
    border-collapse: collapse;
}

/* === BASE === */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Pousse le footer en bas de viewport sur les pages courtes, sans espace
   vide superflu en dessous — chaque page est rendue dans un <main class="page ...">. */
.page {
    flex: 1 0 auto;
}

.site-header,
.site-footer {
    flex-shrink: 0;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 400;
    line-height: var(--leading-tight);
    color: var(--color-text);
}

h1 { font-size: var(--text-4xl); letter-spacing: var(--tracking-wide); }
h2 { font-size: var(--text-2xl); letter-spacing: var(--tracking-wide); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-md); }

p {
    color: var(--color-text);
}

p + p {
    margin-top: var(--space-4);
}

.lead {
    font-family: var(--font-heading);
    font-size: var(--text-md);
    color: var(--color-text-muted);
    line-height: var(--leading-relaxed);
}

a.link {
    color: var(--color-accent);
    border-bottom: 1px solid transparent;
    transition: border-color var(--transition-fast);
}

a.link:hover,
a.link:focus-visible {
    border-bottom-color: currentColor;
}

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

::selection {
    background: rgba(109, 27, 44, 0.18);
    color: var(--color-anthracite);
}

/* === LAYOUT === */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-padding);
}

.container--narrow {
    max-width: 760px;
}

.section {
    padding-block: var(--space-12);
}

.section--alt {
    background-color: var(--color-bg-alt);
}

.section--dark {
    background-color: var(--color-anthracite);
    color: var(--color-ivoire-deep);
}

.section--dark h1,
.section--dark h2,
.section--dark h3 {
    color: var(--color-ivoire);
}

.section-head {
    margin-bottom: var(--space-8);
    text-align: center;
}

.section-head .eyebrow {
    display: inline-block;
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: var(--space-3);
}

/* ==========================================================================
   === PAGE D'ACCUEIL : LA CHARTE ===
   Traitement dédié, distinct du reste du site : un document continu (pas de
   sections alternées), une marge d'articles numérotés en chiffres romains
   (numérotation justifiée : ce sont les articles réels de la charte), un
   sceau de cire en CSS pur comme élément signature, en ouverture et en
   clôture. Prose en serif (registre manuscrit), UI en sans-serif.
   ========================================================================== */

.charter .charter__intro p,
.charter__article-body p,
.charter__article-body .list--orientation,
.pillar__title,
.charter__closing blockquote p {
    font-family: var(--font-heading);
}

/* --- Masthead --- */
.charter__masthead {
    margin-bottom: var(--space-4);
}

.charter__kicker {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    font-variant: small-caps;
    letter-spacing: var(--tracking-wide);
    font-size: var(--text-xs);
    color: var(--color-accent);
    margin-bottom: var(--space-8);
}

.charter__kicker::before,
.charter__kicker::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--color-border);
}

.charter__intro {
    max-width: 640px;
    margin-inline: auto;
}

.charter__intro p {
    font-size: var(--text-md);
    line-height: var(--leading-relaxed);
}

.charter__intro p + p {
    margin-top: var(--space-4);
}

.charter__intro p:first-of-type::first-letter {
    float: left;
    font-size: 4.2em;
    line-height: 0.82;
    padding-right: 0.1em;
    padding-top: 0.03em;
    color: var(--color-bordeaux);
}

/* --- Articles (sans numérotation) --- */
.charter__articles {
    margin-top: var(--space-10);
}

.charter__article {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
    padding-block: var(--space-10);
    border-top: 1px solid var(--color-border);
}

.charter__article:first-child {
    border-top: none;
}

.charter__article-body h2 {
    font-variant: small-caps;
    letter-spacing: var(--tracking-wide);
    font-size: clamp(0.95rem, 0.7rem + 1.3vw, var(--text-lg));
    white-space: nowrap;
    margin-bottom: var(--space-4);
}

.charter__article-body p {
    font-size: var(--text-md);
    line-height: var(--leading-relaxed);
}

.list--orientation {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.list--orientation li {
    position: relative;
    padding-left: var(--space-5);
    font-size: var(--text-md);
    line-height: var(--leading-relaxed);
    color: var(--color-text);
}

.list--orientation li::before {
    content: "—";
    position: absolute;
    left: 0;
    color: var(--color-accent);
}

/* --- Piliers (article IV) : 3 cases empilées, traitement uniforme --- */
.pillars {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    margin-top: var(--space-2);
}

.pillar {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-top: 3px solid var(--color-bordeaux);
    border-radius: var(--radius-md);
    padding: var(--space-6);
    transition: box-shadow var(--transition-base), border-color var(--transition-base);
}

.pillar:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--color-bordeaux);
}

.pillar__title {
    font-variant: small-caps;
    letter-spacing: var(--tracking-wide);
    font-size: var(--text-lg);
    margin-bottom: var(--space-2);
}

.pillar__body {
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    color: var(--color-text-muted);
}

/* --- Écu primitif (héraldique, bloc 6b) : deux écus côte à côte --- */
.heraldique__shields {
    display: flex;
    justify-content: center;
    gap: var(--space-8);
    flex-wrap: wrap;
    margin-bottom: var(--space-4);
}

.heraldique__shield {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    max-width: 220px;
}

.heraldique__shield-img {
    width: 100%;
    height: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background-color: var(--color-surface);
}

.heraldique__shield figcaption {
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-wide);
    color: var(--color-text-muted);
    text-align: center;
}

.heraldique__shields-blazon {
    font-family: var(--font-heading);
    font-size: var(--text-md);
    font-style: italic;
    text-align: center;
    color: var(--color-bordeaux);
    margin-bottom: var(--space-6);
}

@media (max-width: 480px) {
    .heraldique__shields {
        gap: var(--space-6);
    }

    .heraldique__shield {
        max-width: 160px;
    }
}

/* --- Armoiries complètes (héraldique, masthead) --- */
.heraldique__armoiries {
    display: block;
    height: 220px;
    width: auto;
    margin-inline: auto;
    margin-bottom: var(--space-5);
}

/* --- Règle de lecture (héraldique, clôture) : bloc sobre, pas un epigraphe --- */
.heraldique__rule {
    border-top: 1px solid var(--color-border);
    border-left: 3px solid var(--color-bordeaux);
    padding-left: var(--space-6);
}

/* --- Ordres de chevalerie (héraldique, bloc 6c) --- */
.heraldique__orders {
    margin-top: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.heraldique__order {
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-border);
}

.heraldique__order:first-child {
    padding-top: 0;
    border-top: none;
}

.heraldique__order dt {
    font-family: var(--font-heading);
    font-variant: small-caps;
    letter-spacing: var(--tracking-wide);
    color: var(--color-bordeaux);
    margin-bottom: var(--space-2);
}

.heraldique__order dd {
    margin-inline-start: 0;
    font-family: var(--font-heading);
    font-size: var(--text-md);
    line-height: var(--leading-relaxed);
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
}

/* --- Justification du texte courant (page héraldique uniquement) --- */
.page-heraldique .charter__intro p,
.page-heraldique .charter__article-body p {
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
}

/* --- Accroche (accueil, masthead monumental) --- */
.home__masthead {
    text-align: center;
    margin-bottom: var(--space-10);
}

.home__armoiries {
    display: block;
    height: 260px;
    width: auto;
    margin-inline: auto;
    margin-bottom: var(--space-6);
}

.home__house-name {
    text-align: center;
}

.home__house-styles {
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    color: var(--color-text-muted);
    margin-top: var(--space-2);
}

.home__seat {
    margin-top: var(--space-3);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

/* --- Justification du texte courant (page accueil uniquement) --- */
.page-accueil .charter__article-body p {
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
}

/* --- Devise (accueil) --- */
.home__devise {
    text-align: center;
    margin-top: var(--space-12);
}

.home__devise-line {
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    color: var(--color-bordeaux);
}

.home__devise-line + .home__devise-line {
    margin-top: var(--space-4);
}

.home__devise-trad {
    display: block;
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-style: normal;
    color: var(--color-text-muted);
    margin-top: var(--space-1);
}

/* --- Index des sections --- */
.charter__index {
    margin-top: var(--space-10);
    padding-top: var(--space-10);
    border-top: 1px solid var(--color-border);
}

.charter__index h2 {
    font-variant: small-caps;
    letter-spacing: var(--tracking-wide);
    font-size: clamp(0.95rem, 0.7rem + 1.3vw, var(--text-lg));
    white-space: nowrap;
    margin-bottom: var(--space-6);
}

.index-list {
    display: flex;
    flex-direction: column;
}

.index-list__item {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    padding-block: var(--space-4);
    border-bottom: 1px solid var(--color-border);
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    color: var(--color-text);
    transition: color var(--transition-fast);
}

.index-list__leader {
    flex: 1;
    border-bottom: 1px dotted var(--color-border);
    margin-bottom: 0.3em;
}

.index-list__arrow {
    font-family: var(--font-sans);
    color: var(--color-accent);
    transition: transform var(--transition-fast);
}

.index-list__item:hover,
.index-list__item:focus-visible {
    color: var(--color-bordeaux);
}

.index-list__item:hover .index-list__arrow,
.index-list__item:focus-visible .index-list__arrow {
    transform: translateX(4px);
}

/* --- Clôture --- */
.charter__closing {
    margin-top: var(--space-12);
    padding-top: var(--space-4);
    text-align: center;
}

.charter__closing-mark {
    display: block;
    font-family: var(--font-heading);
    font-size: 4rem;
    line-height: 1;
    color: var(--color-bordeaux-pale);
    margin-bottom: calc(-1 * var(--space-3));
}

.charter__closing blockquote {
    max-width: 640px;
    margin-inline: auto;
}

.charter__closing blockquote p {
    font-style: italic;
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
    color: var(--color-text);
}

/* ==========================================================================
   === PAGE HISTOIRE : RÉCIT À MARGE ASYMÉTRIQUE ===
   Traitement distinct de la charte (page d'accueil) : longue lecture en
   onze sections groupées par ère, marge de gauche silencieuse (filet +
   point, sans numérotation), lettrine en tête de chaque section, frise
   chronologique en ouverture.
   ========================================================================== */

.histoire__timeline {
    margin-bottom: var(--space-12);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.histoire__timeline ol {
    display: flex;
    align-items: flex-start;
    gap: var(--space-8);
    min-width: max-content;
    padding-bottom: var(--space-2);
}

.histoire__timeline li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    position: relative;
    padding-top: var(--space-4);
}

.histoire__timeline li::before {
    content: "";
    position: absolute;
    top: 0;
    left: -1.5rem;
    width: calc(100% + 3rem);
    height: 1px;
    background: var(--color-border);
}

.histoire__timeline li:first-child::before {
    left: 0;
    width: calc(50% + 1.5rem);
}

.histoire__timeline li:last-child::before {
    width: calc(50% + 1.5rem);
}

.histoire__timeline-dot {
    position: absolute;
    top: -4px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--color-bordeaux);
}

.histoire__timeline-label {
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-wide);
    color: var(--color-text-muted);
    white-space: nowrap;
    text-decoration: none;
}

a.histoire__timeline-label:hover,
a.histoire__timeline-label:focus-visible {
    color: var(--color-bordeaux);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.histoire__era {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-top: var(--space-12);
    margin-bottom: var(--space-2);
}

.histoire__era:first-of-type {
    margin-top: 0;
}

.histoire__era-label {
    font-variant: small-caps;
    letter-spacing: var(--tracking-wider);
    font-size: var(--text-sm);
    color: var(--color-bordeaux);
    white-space: nowrap;
}

.histoire__era::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--color-border);
}

.histoire__article {
    display: grid;
    grid-template-columns: minmax(48px, 1fr) minmax(0, 3fr);
    gap: var(--space-6);
    padding-block: var(--space-8);
    border-top: 1px solid var(--color-border);
}

.histoire__article:first-child {
    border-top: none;
    padding-top: var(--space-4);
}

.histoire__article-margin {
    position: relative;
}

.histoire__article-margin::before {
    content: "";
    position: absolute;
    top: var(--space-1);
    bottom: var(--space-1);
    left: 50%;
    width: 1px;
    background: var(--color-bordeaux-pale);
}

.histoire__article-margin::after {
    content: "";
    position: absolute;
    top: var(--space-1);
    left: 50%;
    width: 7px;
    height: 7px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: var(--color-bordeaux);
}

.histoire__article-body h2 {
    font-family: var(--font-heading);
    font-variant: small-caps;
    letter-spacing: var(--tracking-wide);
    font-size: clamp(0.65rem, 0.4rem + 0.7vw, var(--text-sm));
    line-height: var(--leading-tight);
    color: var(--color-bordeaux);
    margin-bottom: var(--space-4);
    white-space: nowrap;
}

.histoire__article-body p {
    font-family: var(--font-heading);
    font-size: var(--text-md);
    line-height: var(--leading-relaxed);
    color: var(--color-text);
    text-align: justify;
    text-justify: inter-word;
}

.histoire__article-body p:first-of-type::first-letter {
    float: left;
    font-size: 3.4em;
    line-height: 0.78;
    padding-right: 0.08em;
    padding-top: 0.04em;
    color: var(--color-bordeaux);
}

@media (max-width: 720px) {
    .histoire__article {
        grid-template-columns: 24px 1fr;
        gap: var(--space-4);
    }

    .histoire__article-body h2 {
        overflow-x: auto;
    }
}

/* === PAGE GÉNÉALOGIE === */
.genealogie__intro {
    max-width: 680px;
    margin-inline: auto;
    margin-bottom: var(--space-6);
    text-align: center;
}

/* Paragraphes de l'intro : serif calibré, centré (corrige le justify de hm-article__body p) */
.genealogie__intro-body p {
    text-align: center;
    hyphens: none;
}

.genealogie__legend {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    margin-top: var(--space-4);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-wide);
    color: var(--color-text-muted);
}

.genealogie__person-direct-mark {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-bordeaux);
    flex-shrink: 0;
}

.genealogie__search {
    max-width: 480px;
    margin-inline: auto;
    margin-bottom: var(--space-8);
}

.genealogie__search-input {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background-color: var(--color-surface);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    color: var(--color-text);
}

.genealogie__search-input:focus {
    outline: 2px solid var(--color-bordeaux);
    outline-offset: 2px;
    border-color: var(--color-bordeaux);
}

.genealogie__search-input:focus:not(:focus-visible) {
    outline: none;
}

.genealogie__search-input:focus-visible {
    box-shadow: 0 0 0 2px rgba(109, 27, 44, 0.22);
}

.genealogie__no-results {
    max-width: 480px;
    margin-inline: auto;
    margin-top: var(--space-4);
    text-align: center;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

/* === Liste généalogique calibrée, colorée par origine === */
/* Liste verticale simple, un nom par ligne — pas d'indentation ni de
   traits de filiation. Chaque ligne est colorée selon son rameau ;
   Fièze-Fontaine reste toujours en bordeaux. */

.glist {
    max-width: 760px;
    margin-inline: auto;
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.glist__person {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-1) var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-border);
    border-radius: var(--radius-sm);
    background-color: var(--color-surface);
}

.glist__name {
    font-family: var(--font-heading);
    font-size: var(--text-base);
    color: var(--color-text);
}

.glist__dates,
.glist__title {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.glist__spouse {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    font-style: italic;
}

.glist__info-toggle {
    width: 1.4em;
    height: 1.4em;
    flex-shrink: 0;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    background-color: var(--color-surface);
    color: var(--color-text-muted);
    font-family: var(--font-serif);
    font-style: italic;
    font-size: var(--text-xs);
    line-height: 1;
    cursor: pointer;
    padding: 0;
    margin-left: auto;
}

.glist__info-toggle:hover,
.glist__info-toggle[aria-expanded="true"] {
    border-color: var(--color-bordeaux);
    color: var(--color-bordeaux);
}

.glist__popover {
    width: 100%;
    margin-top: var(--space-2);
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background-color: var(--color-bg);
    font-size: var(--text-xs);
    line-height: var(--leading-relaxed);
    color: var(--color-text-muted);
}

.glist__popover[hidden] {
    display: none;
}

.glist__popover p {
    margin: 0;
}

.glist__popover p + p {
    margin-top: var(--space-2);
}

/* Fièze-Fontaine — siège unique, toujours bordeaux, jamais réutilisé */
.glist__person--fiezefontaine {
    border-left-color: var(--color-bordeaux-pale);
}

.glist__person--fiezefontaine .glist__name {
    color: var(--color-bordeaux);
}

.glist__person--direct {
    background-color: var(--color-bg);
}

.glist__person--direct .glist__name {
    font-weight: 700;
}

.glist__person--flamande { border-left-color: var(--origin-flamande); }
.glist__person--flamande .glist__name { color: var(--origin-flamande); }

.glist__person--fosseroule { border-left-color: var(--origin-fosseroule); }
.glist__person--fosseroule .glist__name { color: var(--origin-fosseroule); }

.glist__person--scherff { border-left-color: var(--origin-scherff); }
.glist__person--scherff .glist__name { color: var(--origin-scherff); }

.glist__person--donceel { border-left-color: var(--origin-donceel); }
.glist__person--donceel .glist__name { color: var(--origin-donceel); }

.glist__person--oultremont { border-left-color: var(--origin-oultremont); }
.glist__person--oultremont .glist__name { color: var(--origin-oultremont); }

.glist__person--glymes { border-left-color: var(--origin-glymes); }
.glist__person--glymes .glist__name { color: var(--origin-glymes); }

.glist__person[hidden] {
    display: none;
}

.glist__person.is-match {
    background-color: var(--color-bg);
    box-shadow: 0 0 0 2px var(--color-bordeaux-pale);
}

.genealogie__legend--origins {
    max-width: 760px;
    margin-inline: auto;
    margin-top: var(--space-6);
    flex-wrap: wrap;
    row-gap: var(--space-2);
}

.glist__origin-swatch {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-left: var(--space-3);
    margin-right: var(--space-1);
    flex-shrink: 0;
}

.glist__origin-swatch:first-child {
    margin-left: 0;
}

.glist__origin-swatch--flamande { background-color: var(--origin-flamande); }
.glist__origin-swatch--fosseroule { background-color: var(--origin-fosseroule); }
.glist__origin-swatch--scherff { background-color: var(--origin-scherff); }
.glist__origin-swatch--donceel { background-color: var(--origin-donceel); }
.glist__origin-swatch--oultremont { background-color: var(--origin-oultremont); }
.glist__origin-swatch--glymes { background-color: var(--origin-glymes); }

.grid {
    display: grid;
    gap: var(--space-6);
}

.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

.flex {
    display: flex;
    align-items: center;
}

.flex--between {
    justify-content: space-between;
}

.flex--gap {
    gap: var(--space-4);
}

/* === COMPOSANTS : BOUTONS === */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    transition: background-color var(--transition-base), color var(--transition-base), border-color var(--transition-base);
    white-space: nowrap;
}

.btn--primary {
    background-color: var(--color-anthracite);
    color: var(--color-ivoire);
    border-color: var(--color-anthracite);
}

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

.btn--outline {
    background-color: transparent;
    color: var(--color-anthracite);
    border-color: var(--color-anthracite);
}

.btn--outline:hover,
.btn--outline:focus-visible {
    background-color: var(--color-anthracite);
    color: var(--color-ivoire);
}

/* === COMPOSANTS : CARTES === */
.card {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-6);
    transition: box-shadow var(--transition-base), border-color var(--transition-base), transform var(--transition-base);
}

.card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--color-bordeaux);
}

.card__eyebrow {
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: var(--space-2);
}

.card__title {
    font-size: var(--text-lg);
    margin-bottom: var(--space-3);
}

.card__body {
    color: var(--color-text-muted);
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
}

.card__meta {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
    font-size: var(--text-sm);
}

/* === PAGE PRIMAT === */
.card--primat {
    max-width: 820px;
    margin-inline: auto;
    padding: var(--space-10) var(--space-8);
    text-align: center;
}

.primat__logo {
    height: 260px;
    width: auto;
    margin-inline: auto;
    margin-bottom: var(--space-5);
}

.primat__house-name {
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--color-text);
    margin-bottom: var(--space-5);
}

.primat__address {
    margin-top: var(--space-10);
    padding-top: var(--space-8);
    border-top: 1px solid var(--color-border);
    text-align: left;
}

.primat__address h2 {
    font-family: var(--font-heading);
    font-variant: small-caps;
    letter-spacing: var(--tracking-wide);
    font-size: var(--text-md);
    color: var(--color-bordeaux);
    text-align: center;
    margin-bottom: var(--space-6);
}

.primat__address-body p {
    font-family: var(--font-heading);
    font-size: var(--text-md);
    line-height: var(--leading-relaxed);
    color: var(--color-text);
    text-align: justify;
    text-justify: inter-word;
    margin-bottom: var(--space-4);
}

.primat__address-body p:first-of-type::first-letter {
    float: left;
    font-size: 3.4em;
    line-height: 0.78;
    padding-right: 0.08em;
    padding-top: 0.04em;
    color: var(--color-bordeaux);
}

.primat__signature {
    margin-top: var(--space-8);
    padding-top: var(--space-6);
    border-top: 1px solid var(--color-border);
    text-align: center;
}

.primat__signature strong {
    display: block;
    font-family: var(--font-heading);
    font-size: var(--text-md);
    letter-spacing: var(--tracking-wide);
    color: var(--color-text);
}

.primat__signature em {
    display: block;
    margin-top: var(--space-1);
    font-style: italic;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

/* === HEADER / NAVIGATION === */
.site-header {
    background-color: var(--color-header-bg);
    color: var(--color-header-text);
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 1px solid var(--color-border);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    height: var(--header-height);
}

.site-header__brand {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.site-header__logo {
    height: calc(var(--header-height) - 24px);
    width: auto;
}

.site-header__name {
    font-family: var(--font-heading);
    font-size: var(--text-md);
    letter-spacing: var(--tracking-wide);
    color: var(--color-anthracite);
}

.nav-main {
    display: flex;
    align-items: center;
    gap: var(--space-8);
}

.nav-main__list {
    display: flex;
    align-items: center;
    gap: var(--space-6);
}

.nav-main__link {
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-anthracite);
    padding-block: var(--space-2);
    border-bottom: 1px solid transparent;
    transition: color var(--transition-fast), border-color var(--transition-fast);
}

.nav-main__link:hover,
.nav-main__link:focus-visible,
.nav-main__link[aria-current="page"] {
    color: var(--color-bordeaux);
    border-bottom-color: var(--color-bordeaux);
}

/* ── DROPDOWN HISTOIRE ─────────────────────────────────────────── */
.nav-main__item--has-dropdown {
    position: relative;
}

.nav-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 11rem;
    background: var(--color-ivoire);
    border-top: 2px solid var(--color-bordeaux);
    box-shadow: 0 4px 12px rgba(46, 42, 38, .08);
    list-style: none;
    padding: var(--space-2) 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
    z-index: 200;
}

.nav-main__item--has-dropdown:hover .nav-dropdown,
.nav-main__item--has-dropdown:focus-within .nav-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.nav-dropdown__link {
    display: block;
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-anthracite);
    padding: var(--space-3) var(--space-4);
    transition: color var(--transition-fast), background-color var(--transition-fast);
}

.nav-dropdown__link:hover,
.nav-dropdown__link:focus-visible,
.nav-dropdown__link[aria-current="page"] {
    color: var(--color-bordeaux);
    background-color: var(--color-ivoire-deep);
}

.nav-main__link--parent-active {
    color: var(--color-bordeaux);
    border-bottom-color: var(--color-bordeaux);
}

.lang-switch {
    position: relative;
}

.lang-switch__list {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.lang-switch__link {
    display: inline-block;
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-anthracite);
    padding: var(--space-1) var(--space-2);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    transition: color var(--transition-fast), border-color var(--transition-fast);
}

.lang-switch__link:hover,
.lang-switch__link:focus-visible {
    color: var(--color-bordeaux);
    border-color: rgba(109, 27, 44, 0.35);
}

/* Langue active : mise en évidence discrète, dans la même liste, sans
   doublon ni badge séparé — élément non cliquable (c'est déjà la page
   courante), pas de fond plein pour rester sobre. */
.lang-switch__link.is-current {
    color: var(--color-bordeaux);
    font-weight: 700;
    cursor: default;
}

/* === FOOTER === */
.site-footer {
    background-color: var(--color-footer-bg);
    color: var(--color-footer-text);
    padding-block: var(--space-10) var(--space-6);
    border-top: 1px solid var(--color-border);
}

.site-footer__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
    text-align: center;
}

.site-footer__logo {
    height: 104px;
    width: auto;
    margin-bottom: var(--space-2);
}

.site-footer__full-name {
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.site-footer__mottoes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
}

.site-footer__motto {
    font-family: var(--font-heading);
    font-style: italic;
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-wide);
    color: var(--color-accent);
}

.site-footer__motto-sep {
    color: var(--color-text-muted);
    font-size: var(--text-xs);
}

.site-footer__rank {
    font-size: 0.65rem;
    letter-spacing: var(--tracking-wide);
    color: var(--color-text-muted);
}

.site-footer__nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2);
    align-items: center;
    margin-top: var(--space-4);
}

.site-footer__nav-link {
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-wide);
    color: var(--color-text-muted);
    text-decoration: none;
    text-transform: uppercase;
    transition: color var(--transition-fast);
}

.site-footer__nav-link:hover,
.site-footer__nav-link:focus-visible {
    color: var(--color-bordeaux);
}

.site-footer__nav-sep {
    color: var(--color-pierre-light);
    font-size: var(--text-xs);
}

.site-footer__divider {
    width: 64px;
    height: 1px;
    background-color: var(--color-bordeaux);
    border: 0;
    margin-block: var(--space-1);
}

.site-footer__rights {
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-wide);
    color: var(--color-text-muted);
}

/* === NAVIGATION INTER-PAGES === */
.page-subnav {
    padding-block: var(--space-8);
    border-top: 1px solid var(--color-border);
    background: var(--color-ivoire);
}

.page-subnav .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
}

.page-subnav__prev,
.page-subnav__next {
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-style: italic;
    color: var(--color-anthracite);
    text-decoration: none;
    letter-spacing: var(--tracking-wide);
    transition: color var(--transition-fast);
}

.page-subnav__prev:hover,
.page-subnav__prev:focus-visible,
.page-subnav__next:hover,
.page-subnav__next:focus-visible {
    color: var(--color-bordeaux);
}

.page-subnav__next {
    margin-left: auto;
}

/* === UTILITAIRES ACCESSIBILITÉ === */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.sr-only:focus,
.sr-only:focus-visible {
    position: static;
    width: auto;
    height: auto;
    padding: 0.5rem 1rem;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
    background-color: var(--color-bordeaux);
    color: var(--color-ivoire);
    text-decoration: none;
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: 600;
    z-index: 9999;
    outline: 2px solid var(--color-ivoire);
    outline-offset: 2px;
}

/* === MICRO-INTERACTIONS : RÉVÉLATION AU SCROLL === */
.reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 600ms ease, transform 600ms ease;
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* === BOUTON HAMBURGER (mobile) === */
.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: transparent;
    flex-shrink: 0;
    transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.nav-toggle:hover,
.nav-toggle:focus-visible {
    border-color: var(--color-bordeaux);
}

.nav-toggle__bar {
    display: block;
    width: 20px;
    height: 2px;
    background-color: var(--color-anthracite);
    transition: transform var(--transition-base), opacity var(--transition-base), background-color var(--transition-fast);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) {
    opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ==========================================================================
   === RESPONSIVE ===
   Breakpoints : ≤480px (mobile étroit), ≤640px (mobile), ≤860px (tablette),
   ≤1080px (petit desktop / grilles 4→2). Mobile-first via max-width,
   cohérent avec --container-max: 1180px défini plus haut.
   ========================================================================== */

/* --- ≤1080px : resserrement général, grilles 4 colonnes → 2 --- */
@media (max-width: 1080px) {
    :root {
        --header-height: 150px;
    }

    .grid--4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .section {
        padding-block: var(--space-10);
    }
}

/* --- ≤860px : tablette — navigation mobile, grilles 3→2 --- */
@media (max-width: 860px) {
    .container {
        --container-padding: var(--space-5);
    }

    .grid--3 {
        grid-template-columns: repeat(2, 1fr);
    }

    .charter__article {
        grid-template-columns: 1fr;
        gap: var(--space-2);
        padding-block: var(--space-8);
    }

    /* Navigation : bascule en panneau plein écran déclenché par le hamburger */
    .nav-toggle {
        display: inline-flex;
    }

    .nav-main {
        position: fixed;
        inset: var(--header-height) 0 0 0;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 0;
        background-color: var(--color-ivoire);
        padding: var(--space-8) var(--space-6);
        overflow-y: auto;
        transform: translateY(-8px);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity var(--transition-base), transform var(--transition-base), visibility var(--transition-base);
    }

    .nav-main.is-open {
        opacity: 1;
        transform: translateY(0);
        visibility: visible;
        pointer-events: auto;
    }

    .nav-main__list {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        width: 100%;
        border-top: 1px solid var(--color-border);
    }

    .nav-main__list li {
        width: 100%;
    }

    .nav-main__link {
        display: block;
        width: 100%;
        padding-block: var(--space-4);
        border-bottom: 1px solid var(--color-border);
        font-size: var(--text-md);
    }

    .nav-main__link:hover,
    .nav-main__link:focus-visible,
    .nav-main__link[aria-current="page"] {
        border-bottom-color: var(--color-bordeaux);
    }

    .nav-main__item--has-dropdown {
        position: static;
    }

    .nav-dropdown {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border-top: none;
        border-left: 2px solid var(--color-bordeaux);
        background: transparent;
        padding: 0 0 0 var(--space-4);
    }

    .nav-dropdown__link {
        padding-block: var(--space-3);
        border-bottom: 1px solid var(--color-border);
        font-size: var(--text-sm);
    }

    .lang-switch {
        width: 100%;
        margin-top: var(--space-6);
    }

    .lang-switch__list {
        width: 100%;
        flex-wrap: wrap;
        gap: var(--space-2);
    }

    .lang-switch__link {
        padding: var(--space-2) var(--space-3);
    }

    body.nav-open {
        overflow: hidden;
    }
}

/* --- ≤640px : mobile — typographie fluide, espacements resserrés --- */
@media (max-width: 640px) {
    :root {
        --header-height: 116px;
        --container-padding: var(--space-4);

        --text-4xl: clamp(2rem, 1.4rem + 3vw, 2.875rem);
        --text-3xl: clamp(1.75rem, 1.3rem + 2.2vw, 2.375rem);
        --text-2xl: clamp(1.5rem, 1.2rem + 1.5vw, 1.875rem);
        --text-xl: clamp(1.25rem, 1.05rem + 1vw, 1.5rem);

        --space-12: 3.5rem;
        --space-10: 2.75rem;
        --space-8: 2rem;
    }

    .grid--2,
    .grid--3,
    .grid--4 {
        grid-template-columns: 1fr;
    }

    .site-header__name {
        font-size: var(--text-sm);
    }

    .section-head {
        margin-bottom: var(--space-6);
    }

    .site-footer__logo {
        height: 44px;
    }

    .charter__intro p:first-of-type::first-letter {
        font-size: 3.2em;
    }
}

/* --- ≤480px : très petit mobile --- */
@media (max-width: 480px) {
    .card {
        padding: var(--space-5);
    }

    .nav-main {
        padding: var(--space-6) var(--space-4);
    }
}

/* --- Confort tactile : agrandit les cibles de clic sous le seuil souris --- */
@media (hover: none) and (pointer: coarse) {
    .nav-main__link,
    .lang-switch__link,
    .btn {
        min-height: 44px;
    }
}

/* ==========================================================================
   PAGE D'ACCUEIL — hm-* — encadrés institutionnels
   Structure identique ; traitement visuel affiné : accent bordeaux au survol,
   séparateur centré, fond ivoire chaud, typographie calibrée.
   ========================================================================== */

/* ── MASTHEAD ────────────────────────────────────────────────────────────── */
.hm-masthead {
    padding-block: var(--space-16);
    background: var(--color-ivoire);
    border-top: 2px solid var(--color-bordeaux);
    border-bottom: 1px solid var(--color-border);
    text-align: center;
}

.hm-logo {
    display: block;
    height: 180px;
    width: auto;
    margin-inline: auto;
    margin-bottom: var(--space-8);
}

.hm-name {
    font-family: var(--font-heading);
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    font-weight: 400;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--color-anthracite);
    line-height: 1;
    margin-bottom: var(--space-5);
}

.hm-variants {
    font-family: var(--font-heading);
    font-size: var(--text-md);
    color: var(--color-pierre);
    margin-bottom: var(--space-3);
}

.hm-seat {
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--color-bordeaux);
    opacity: 0.8;
}

.hm-europe {
    font-family: var(--font-heading);
    font-style: italic;
    font-size: var(--text-sm);
    letter-spacing: 0.03em;
    color: var(--color-pierre);
    margin-top: var(--space-3);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
    max-width: 600px;
    margin-inline: auto;
}

/* ── GRILLE DE CARTES ────────────────────────────────────────────────────── */
.hm-body {
    padding-block: var(--space-12);
    background: var(--color-ivoire-deep);
}

.hm-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-5);
    margin-bottom: var(--space-8);
}

/* ── CARTE ───────────────────────────────────────────────────────────────── */
.hm-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-top: 3px solid transparent;
    border-radius: 8px;
    padding: var(--space-8);
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    transition:
        border-color 200ms ease,
        border-top-color 200ms ease,
        box-shadow 200ms ease,
        transform 200ms ease;
}

.hm-card:hover {
    border-color: var(--color-pierre-light);
    border-top-color: var(--color-bordeaux);
    box-shadow: 0 6px 24px rgba(46, 42, 38, 0.09);
    transform: translateY(-2px);
}

.hm-card--wide {
    grid-column: 1 / -1;
}

/* En-tête de carte — séparateur bordeaux centré */
.hm-card__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-2);
    padding-bottom: var(--space-5);
}

.hm-card__head::after {
    content: '';
    display: block;
    width: 32px;
    height: 1px;
    background: var(--color-bordeaux);
    opacity: 0.45;
    margin-top: var(--space-2);
}

/* Chiffre / date — grand watermark */
.hm-card__date {
    font-family: var(--font-heading);
    font-size: var(--text-4xl);
    color: var(--color-bordeaux);
    opacity: 0.18;
    line-height: 1;
    letter-spacing: 0.02em;
}

/* Titre de section */
.hm-card__title {
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--color-bordeaux);
    font-weight: 400;
    text-align: center;
}

/* Corps de carte */
.hm-card__body p {
    font-family: var(--font-heading);
    font-size: var(--text-base);
    line-height: 1.78;
    color: var(--color-text);
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
}

.hm-card__body p + p {
    margin-top: var(--space-4);
}

/* Corps en 2 colonnes pour Chancellerie (pleine largeur) */
.hm-card__body--cols {
    column-count: 2;
    column-gap: var(--space-10);
}

.hm-card__body--cols p {
    break-inside: avoid;
}

.hm-card__body strong {
    font-weight: 600;
    color: var(--color-anthracite);
}

/* ── CITATION ────────────────────────────────────────────────────────────── */
.hm-cite {
    padding-block: var(--space-10);
    text-align: center;
}

.hm-cite::before {
    content: '';
    display: block;
    width: 32px;
    height: 2px;
    background: var(--color-bordeaux);
    opacity: 0.5;
    margin: 0 auto var(--space-6);
}

.hm-cite em {
    font-family: var(--font-heading);
    font-size: var(--text-md);
    font-style: italic;
    color: var(--color-bordeaux);
    line-height: var(--leading-relaxed);
    display: block;
    max-width: 720px;
    margin-inline: auto;
}

/* ── DEVISE ──────────────────────────────────────────────────────────────── */
.hm-devise {
    background: var(--color-ivoire);
    padding-block: var(--space-12);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    text-align: center;
}

.hm-devise__l {
    font-family: var(--font-heading);
    font-size: var(--text-base);
    color: var(--color-pierre);
    line-height: 2.4;
}

.hm-devise__l em {
    color: var(--color-bordeaux);
    font-style: italic;
    letter-spacing: 0.01em;
}

.hm-devise__trad { color: var(--color-pierre); }

/* ── NAVIGATION ──────────────────────────────────────────────────────────── */
.hm-nav {
    padding-block: var(--space-12);
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
}

.hm-nav__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: var(--color-border);
}

.hm-nav__item {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-6) var(--space-5);
    background: var(--color-surface);
    color: var(--color-anthracite);
    text-decoration: none;
    border-left: 2px solid transparent;
    transition:
        background var(--transition-base),
        border-left-color var(--transition-base);
}

.hm-nav__item:hover,
.hm-nav__item:focus-visible {
    background: var(--color-ivoire);
    border-left-color: var(--color-bordeaux);
}

.hm-nav__label {
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: 400;
    color: var(--color-anthracite);
    line-height: 1;
    transition: color var(--transition-fast);
}

.hm-nav__item:hover .hm-nav__label,
.hm-nav__item:focus-visible .hm-nav__label {
    color: var(--color-bordeaux);
}

.hm-nav__desc {
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    color: var(--color-pierre);
    line-height: var(--leading-relaxed);
    flex: 1;
}

.hm-nav__arrow {
    align-self: flex-start;
    font-size: var(--text-sm);
    color: var(--color-bordeaux);
    opacity: 0;
    transition:
        opacity var(--transition-fast),
        transform var(--transition-fast);
}

.hm-nav__item:hover .hm-nav__arrow,
.hm-nav__item:focus-visible .hm-nav__arrow {
    opacity: 1;
    transform: translateX(4px);
}

/* ── CLÔTURE ─────────────────────────────────────────────────────────────── */
.hm-closing {
    padding-block: var(--space-12);
    background: var(--color-surface);
    text-align: center;
    border-top: 1px solid var(--color-border);
}

.hm-closing p {
    font-family: var(--font-heading);
    font-style: italic;
    font-size: var(--text-sm);
    color: var(--color-pierre);
    max-width: 600px;
    margin-inline: auto;
    line-height: var(--leading-relaxed);
}

/* ── RESPONSIVE ──────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
    .hm-logo { height: 150px; }
    .hm-masthead { padding-block: var(--space-12); }
    .hm-grid { grid-template-columns: 1fr; }
    .hm-card--wide { grid-column: auto; }
    .hm-card__body--cols { column-count: 1; }
    .hm-nav__grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .hm-masthead { padding-block: var(--space-10); }
    .hm-logo { height: 110px; }
    .hm-body { padding-block: var(--space-8); }
    .hm-card { padding: var(--space-6); }
}

/* ==========================================================================
   NOUVEAUX COMPOSANTS — ACCUEIL
   1. Grille 3 colonnes « La Maison »
   2. Bande chronologique sobre
   3. Blocs de contenu alternés ivoire / ivoire-deep
   4. Articles longs (hm-article)
   5. Valeurs sans puces
   ========================================================================== */

/* ── 1. GRILLE 3 COLONNES — LA MAISON ──────────────────────────────────── */
.hm-maison {
    padding-block: var(--space-12);
    background: var(--color-ivoire-deep);
    border-bottom: 1px solid var(--color-border);
}

.hm-maison__eyebrow {
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--color-bordeaux);
    text-align: center;
    margin-bottom: var(--space-6);
}

.hm-maison__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--color-border);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.hm-maison__card {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-8) var(--space-6);
    background: var(--color-surface);
    text-decoration: none;
    color: var(--color-anthracite);
    border-left: 3px solid transparent;
    transition:
        background var(--transition-base),
        border-left-color var(--transition-base);
}

.hm-maison__card:hover,
.hm-maison__card:focus-visible {
    background: var(--color-ivoire);
    border-left-color: var(--color-bordeaux);
}

.hm-maison__card-date {
    font-family: var(--font-heading);
    font-size: var(--text-2xl);
    color: var(--color-bordeaux);
    opacity: 0.22;
    line-height: 1;
    letter-spacing: 0.02em;
    display: block;
}

.hm-maison__card-label {
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: 400;
    color: var(--color-anthracite);
    line-height: var(--leading-tight);
    transition: color var(--transition-fast);
}

.hm-maison__card:hover .hm-maison__card-label,
.hm-maison__card:focus-visible .hm-maison__card-label {
    color: var(--color-bordeaux);
}

.hm-maison__card-desc {
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    color: var(--color-pierre);
    line-height: var(--leading-relaxed);
    flex: 1;
}

.hm-maison__card-arrow {
    font-size: var(--text-sm);
    color: var(--color-bordeaux);
    opacity: 0;
    align-self: flex-start;
    transition:
        opacity var(--transition-fast),
        transform var(--transition-fast);
}

.hm-maison__card:hover .hm-maison__card-arrow,
.hm-maison__card:focus-visible .hm-maison__card-arrow {
    opacity: 1;
    transform: translateX(4px);
}

/* ── 2. BANDE CHRONOLOGIQUE SOBRE ──────────────────────────────────────── */
.hm-chrono {
    background: var(--color-anthracite);
    padding-block: var(--space-8);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--color-bordeaux-deep) var(--color-anthracite-soft);
}

.hm-chrono__list {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    list-style: none;
    padding: 0;
    margin: 0;
    min-width: 480px;
    /* ligne de frise */
    position: relative;
}

/* Ligne horizontale fine sous les points */
.hm-chrono__list::before {
    content: '';
    position: absolute;
    top: calc(var(--space-5) + 3px); /* alignée sur les points */
    left: 0;
    right: 0;
    height: 1px;
    background: rgba(255, 255, 255, 0.12);
}

.hm-chrono__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    position: relative;
    flex: 1;
    padding-top: var(--space-5);
}

.hm-chrono__dot {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--color-bordeaux);
    flex-shrink: 0;
}

.hm-chrono__year {
    font-family: var(--font-heading);
    font-size: var(--text-base);
    letter-spacing: 0.04em;
    color: var(--color-ivoire);
    line-height: 1;
    white-space: nowrap;
}

.hm-chrono__label {
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-ivoire);
    white-space: nowrap;
}

/* ── 3. BLOCS ALTERNÉS ivoire / ivoire-deep ─────────────────────────── */
.hm-section {
    padding-block: var(--space-12);
}

.hm-section--ivoire {
    background: var(--color-ivoire);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

.hm-section--ivoire-deep {
    background: var(--color-ivoire-deep);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

/* ── 4. ARTICLES LONGS (hm-article) ────────────────────────────────────── */
.hm-article {
    /* pas de card : texte directement sur le fond de section */
}

.hm-article__date {
    display: block;
    font-family: var(--font-heading);
    font-size: clamp(3rem, 8vw, 5.5rem);
    line-height: 1;
    color: var(--color-bordeaux);
    opacity: 0.10;
    letter-spacing: 0.02em;
    margin-bottom: calc(-1 * var(--space-5));
    user-select: none;
    pointer-events: none;
}

.hm-article__title {
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    font-weight: 400;
    letter-spacing: var(--tracking-wide);
    color: var(--color-anthracite);
    margin-bottom: var(--space-5);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-border);
}

.hm-article__body p {
    font-family: var(--font-heading);
    font-size: var(--text-md);
    line-height: var(--leading-relaxed);
    color: var(--color-text);
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
}

.hm-article__body p + p {
    margin-top: var(--space-4);
}

.hm-article__body strong {
    font-weight: 600;
    color: var(--color-anthracite);
}

/* Séparateur entre articles dans un même bloc */
.hm-article-sep {
    width: 40px;
    height: 1px;
    background: var(--color-bordeaux);
    opacity: 0.35;
    margin-block: var(--space-10);
    margin-inline: auto;
}

/* ── 5. VALEURS SANS PUCES ──────────────────────────────────────────────── */

/* Corps du bloc Activités : les **terme** sont rendus bold dans un <p> */
.hm-article__body--activites p strong {
    display: inline;
    font-weight: 600;
    color: var(--color-anthracite);
}

/* Corps du bloc Valeurs */
.hm-article__body--values {
    /* Mêmes règles de base que hm-article__body */
}

.hm-values__intro {
    font-family: var(--font-heading);
    font-size: var(--text-md);
    line-height: var(--leading-relaxed);
    color: var(--color-text);
    margin-bottom: var(--space-6);
    font-style: italic;
}

.hm-values__item {
    font-family: var(--font-heading);
    font-size: var(--text-md);
    line-height: var(--leading-relaxed);
    color: var(--color-text);
    padding-left: var(--space-5);
    border-left: 2px solid var(--color-bordeaux-pale);
    margin-bottom: var(--space-5);
    text-align: left; /* pas justify pour les valeurs : plus lisible */
}

.hm-values__item:last-child {
    margin-bottom: 0;
}

.hm-values__term {
    font-weight: 700;
    color: var(--color-bordeaux);
    font-style: normal;
    letter-spacing: 0.01em;
}

/* ── RESPONSIVE NOUVEAUX COMPOSANTS ────────────────────────────────────── */
@media (max-width: 860px) {
    .hm-maison__grid {
        grid-template-columns: 1fr;
    }

    .hm-maison__card {
        border-left-width: 0;
        border-top: 3px solid transparent;
    }

    .hm-maison__card:hover,
    .hm-maison__card:focus-visible {
        border-left-color: transparent;
        border-top-color: var(--color-bordeaux);
    }

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

    .hm-section {
        padding-block: var(--space-10);
    }

    .hm-article-sep {
        margin-block: var(--space-8);
    }
}

@media (max-width: 640px) {
    .hm-maison {
        padding-block: var(--space-8);
    }

    .hm-article__title {
        font-size: var(--text-lg);
    }

    .hm-article__body p,
    .hm-values__intro,
    .hm-values__item {
        font-size: var(--text-base);
        /* désactive justify sur mobile étroit : évite les blancs disgracieux */
        text-align: left;
    }

    .hm-article__date {
        font-size: clamp(2.5rem, 12vw, 4rem);
    }

    .hm-section {
        padding-block: var(--space-8);
    }

    .hm-article-sep {
        margin-block: var(--space-6);
    }

    .hm-values__item {
        padding-left: var(--space-4);
    }
}

@media (hover: none) and (pointer: coarse) {
    /* Sur tactile, l'état hover n'est jamais déclenché :
       on rend la flèche toujours visible pour indiquer la navigabilité */
    .hm-maison__card-arrow {
        opacity: 0.5;
    }
}

/* ==========================================================================
   PAGE HISTOIRE — compatibilité avec le système hm-*
   ========================================================================== */

/* Lettrine sur hm-article__body (remplace histoire__article-body) */
.page-histoire .hm-article__body p:first-of-type::first-letter {
    float: left;
    font-size: 3.4em;
    line-height: 0.78;
    padding-right: 0.08em;
    padding-top: 0.04em;
    color: var(--color-bordeaux);
}

/* Eyebrow d'ère : espacement sous le libellé avant le premier article */
.page-histoire .histoire__era-label {
    margin-bottom: var(--space-8);
    padding-bottom: var(--space-5);
    border-bottom: 1px solid var(--color-border);
}

/* Liens de navigation dans la frise .hm-chrono (fond anthracite) */
.hm-chrono a.hm-chrono__label {
    text-decoration: none;
}

.hm-chrono a.hm-chrono__label:hover,
.hm-chrono a.hm-chrono__label:focus-visible {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ==========================================================================
   PAGE HÉRALDIQUE — ajustements masthead et règle de lecture
   ========================================================================== */

.page-heraldique .hm-masthead {
    padding-block: var(--space-12);
}

.page-heraldique .heraldique__rule.hm-article {
    border-top: none;
}

/* ==========================================================================
   PAGE GÉNÉALOGIE — intro centrée
   ========================================================================== */

.genealogie__intro-body p {
    text-align: center;
    hyphens: none;
}

/* ==========================================================================
   PAGE CONTACT — pôles et adresses
   ========================================================================== */

.contact__emails {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin-top: var(--space-3);
}

.contact__email {
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    color: var(--color-bordeaux);
    text-decoration: none;
    transition: opacity var(--transition-fast);
}

.contact__email:hover,
.contact__email:focus-visible {
    opacity: 0.7;
    text-decoration: underline;
}

.contact__address {
    font-family: var(--font-heading);
    font-size: var(--text-md);
    line-height: var(--leading-relaxed);
    color: var(--color-text);
    font-style: normal;
    padding: var(--space-6);
    background: var(--color-surface);
}

.contact__address strong {
    display: block;
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-bordeaux);
    margin-bottom: var(--space-2);
}

/* ==========================================================================
   PAGE PRIMAT — cadre documentaire
   ========================================================================== */

.primat__frame {
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-bordeaux);
    padding: var(--space-10) var(--space-10) var(--space-8);
    position: relative;
}

.primat__frame::before {
    content: '';
    position: absolute;
    inset-inline: var(--space-3);
    top: var(--space-3);
    bottom: var(--space-3);
    border: 1px solid color-mix(in srgb, var(--color-bordeaux) 30%, transparent);
    pointer-events: none;
}

.primat__frame-header {
    text-align: center;
    margin-bottom: var(--space-6);
}

.primat__frame-logo {
    display: block;
    width: 240px;
    height: auto;
    margin: 0 auto var(--space-5);
}

.primat__frame-house {
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-bordeaux);
    margin-bottom: var(--space-1);
}

.primat__frame-styles {
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    color: var(--color-text-muted, #6b5d52);
}

.primat__frame-sep {
    height: 1px;
    background: color-mix(in srgb, var(--color-bordeaux) 25%, transparent);
    margin-block: var(--space-6);
}

.primat__frame-title {
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-bordeaux);
    margin-bottom: var(--space-5);
}

.primat__frame-footer {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.primat__signature {
    font-family: var(--font-heading);
    font-size: var(--text-md);
    line-height: var(--leading-relaxed);
}

.primat__signature strong {
    display: block;
    font-weight: 600;
}

.primat__devise {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
}

.primat__devise p {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-3);
}

.primat__devise-latin {
    font-family: var(--font-heading);
    font-style: italic;
    font-size: var(--text-md);
    color: var(--color-bordeaux);
}

.primat__devise-trad {
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    color: var(--color-text-muted, #6b5d52);
}

@media (max-width: 640px) {
    .primat__frame {
        padding: var(--space-7) var(--space-5) var(--space-6);
    }
    .primat__frame::before {
        inset-inline: var(--space-2);
        top: var(--space-2);
        bottom: var(--space-2);
    }
}

/* ==========================================================================
   DOCTRINE — styles spécifiques à la page /doctrine
   Préfixe .doctrine- sur toutes les classes.
   Ordre des fonds : blanc → ivoire → ivoire-deep → ivoire → blanc
   Jamais deux sections de même couleur consécutives.
   ========================================================================== */

/* ── HERO (fond blanc) ───────────────────────────────────────────────────── */

.doctrine-hero {
    position: relative;
    background-color: var(--color-blanc);
    padding-block: var(--space-12) var(--space-10);
    overflow: hidden;
    text-align: center;
}

/* Ornement : trait bordeaux suspendu en bas du hero */
.doctrine-hero::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    height: var(--space-10);
    background-color: var(--color-bordeaux);
}

.doctrine-hero__eyebrow {
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--color-pierre);
    margin-block-end: var(--space-5);
}

.doctrine-hero__title {
    font-family: var(--font-heading);
    font-size: clamp(1.1rem, 1.25vw + 0.875rem, 1.375rem);
    font-weight: 300;
    line-height: var(--leading-tight);
    color: var(--color-anthracite);
    max-width: none;
    margin-inline: auto;
    margin-block-end: var(--space-6);
}

.doctrine-hero__subtitle {
    font-family: var(--font-heading);
    font-size: clamp(1.125rem, 2vw, 1.375rem);
    font-weight: 400;
    font-style: italic;
    color: var(--color-pierre);
    max-width: 50ch;
    margin-inline: auto;
    line-height: var(--leading-relaxed);
}

/* ── CHAPEAU — lead italic entre hero et sections ───────────────────────── */

.doctrine-chapeau {
    background-color: var(--color-blanc);
    padding-block: var(--space-10) var(--space-12);
}

.doctrine-chapeau__text {
    font-family: var(--font-heading);
    font-size: clamp(1.125rem, 2vw, 1.3125rem);
    font-weight: 400;
    font-style: italic;
    line-height: var(--leading-relaxed);
    color: var(--color-pierre);
    max-width: 60ch;
    margin-inline: auto;
    text-align: center;
}

/* ── SECTIONS — base + variantes de fond ────────────────────────────────── */

.doctrine-section {
    padding-block: var(--space-12);
}

.doctrine-section--ivoire {
    background-color: var(--color-ivoire);
}

.doctrine-section--ivoire-deep {
    background-color: var(--color-ivoire-deep);
}

.doctrine-section--blanc {
    background-color: var(--color-blanc);
}

/* ── INNER — colonne étroite centrée (680 px) ───────────────────────────── */

.doctrine-section__inner {
    max-width: 680px;
    margin-inline: auto;
    padding-inline: var(--container-padding);
}

/* ── KICKER — étiquette de section avec rail horizontal ─────────────────── */

.doctrine-section__kicker {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--color-pierre);
    margin-block-end: var(--space-5);
}

/* Rail court pierre avant le libellé */
.doctrine-section__kicker::before {
    content: '';
    flex: 0 0 2.5rem;
    height: 1px;
    background-color: var(--color-pierre-light);
}

/* ── TITLE — h2 sérifé poids 400, séparateur bordeaux ───────────────────── */

.doctrine-section__title {
    font-family: var(--font-heading);
    font-size: clamp(1.25rem, 2.22vw + 0.8rem, 1.75rem);
    font-weight: 400;
    line-height: var(--leading-tight);
    color: var(--color-anthracite);
    margin-block-end: var(--space-5);
}

/* Trait bordeaux généré sous le titre */
.doctrine-section__title::after {
    content: '';
    display: block;
    width: 2.5rem;
    height: 2px;
    background-color: var(--color-bordeaux);
    margin-block-start: var(--space-4);
}

/* ── BODY — Cormorant 17 px, interligne 1.8 ────────────────────────────── */

.doctrine-section__body {
    font-family: var(--font-heading);
    font-size: 1.0625rem;
    line-height: 1.8;
    color: var(--color-anthracite);
}

.doctrine-section__body p {
    margin-block-end: var(--space-5);
}

.doctrine-section__body p:last-child {
    margin-block-end: 0;
}

.doctrine-section__body a {
    color: var(--color-bordeaux);
    text-decoration-color: var(--color-bordeaux-pale);
    text-underline-offset: 0.2em;
    transition: text-decoration-color var(--transition-fast);
}

.doctrine-section__body a:hover,
.doctrine-section__body a:focus-visible {
    text-decoration-color: var(--color-bordeaux);
}

.doctrine-citations + .doctrine-section__body {
    margin-block-start: var(--space-8);
}

/* ── LISTE — tirets bordeaux générés ────────────────────────────────────── */

.doctrine-section__list {
    list-style: none;
    padding: 0;
    margin: 0;
    margin-block: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.doctrine-section__list-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    font-family: var(--font-heading);
    font-size: 1.0625rem;
    line-height: 1.75;
    color: var(--color-anthracite);
}

.doctrine-section__list-item::before {
    content: '—';
    flex-shrink: 0;
    color: var(--color-bordeaux);
    font-weight: 300;
}

/* ── CITATIONS — blockquote avec bordure bordeaux gauche ────────────────── */

.doctrine-citations {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.doctrine-citation {
    padding-inline-start: var(--space-4);
    border-inline-start: 2px solid var(--color-bordeaux);
    margin: 0;
}

.doctrine-citation__text {
    font-family: var(--font-heading);
    font-size: clamp(0.9375rem, 1.4vw, 1.0625rem);
    font-weight: 400;
    font-style: italic;
    line-height: 1.6;
    color: var(--color-anthracite);
    margin-block-end: 0;
}

/* Guillemets typographiques en bordeaux pâle */
.doctrine-citation__text::before { content: '\201C'; color: var(--color-bordeaux-pale); }
.doctrine-citation__text::after  { content: '\201D'; color: var(--color-bordeaux-pale); }

.doctrine-citation__source {
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-pierre);
}

/* Nom propre en bordeaux dans la source */
.doctrine-citation__source em {
    font-style: normal;
    color: var(--color-bordeaux);
}

/* ── ORNEMENT — séparateur décoratif entre corps et citations ───────────── */

.doctrine-ornament {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-block: var(--space-8);
    color: var(--color-bordeaux-pale);
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 300;
    user-select: none;
}

.doctrine-ornament::before,
.doctrine-ornament::after {
    content: '';
    flex: 1;
    height: 1px;
    background-color: var(--color-pierre-light);
}

/* ── SUBNAV — navigation contextuelle ← Primat / Archives → ─────────────── */

.doctrine-subnav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-block: var(--space-10);
    padding-inline: var(--space-4);
    max-width: 680px;
    margin-inline: auto;
    gap: var(--space-6);
}

.doctrine-subnav__prev,
.doctrine-subnav__next {
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--color-pierre);
    text-decoration: none;
    transition: color var(--duration-fast) ease;
}

.doctrine-subnav__prev:hover,
.doctrine-subnav__next:hover {
    color: var(--color-bordeaux);
}

.doctrine-subnav__prev::before {
    content: '←\00a0';
}

.doctrine-subnav__next::after {
    content: '\00a0→';
}

/* ── REVEAL — décalages en cascade pour les enfants directs ─────────────── */

.doctrine-section__inner > .reveal:nth-child(1) { transition-delay: 0ms;   }
.doctrine-section__inner > .reveal:nth-child(2) { transition-delay: 80ms;  }
.doctrine-section__inner > .reveal:nth-child(3) { transition-delay: 160ms; }
.doctrine-section__inner > .reveal:nth-child(4) { transition-delay: 240ms; }

/* ── PREFERS-REDUCED-MOTION ─────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .doctrine-section__inner > .reveal:nth-child(1),
    .doctrine-section__inner > .reveal:nth-child(2),
    .doctrine-section__inner > .reveal:nth-child(3),
    .doctrine-section__inner > .reveal:nth-child(4) {
        transition-delay: 0ms;
    }

    .doctrine-section__body a {
        transition: none;
    }
}

/* ── RESPONSIVE — mobile ≤ 640 px ──────────────────────────────────────── */

@media (max-width: 640px) {

    /* Hero : aligné à gauche, ornement vertical retiré */
    .doctrine-hero {
        padding-block: var(--space-10) var(--space-8);
        text-align: left;
    }

    .doctrine-hero::after {
        display: none;
    }

    .doctrine-hero__title {
        max-width: none;
        font-size: clamp(1.1rem, 4vw, 1.375rem);
    }

    .doctrine-hero__subtitle {
        max-width: none;
        font-size: 1.0625rem;
    }

    /* Sections : espacement vertical réduit */
    .doctrine-section {
        padding-block: var(--space-10);
    }

    .doctrine-section__inner {
        padding-inline: var(--space-5);
    }

    /* Kicker : rail raccourci */
    .doctrine-section__kicker::before {
        flex-basis: 1.5rem;
    }

    /* Titre : taille réduite sur petits écrans */
    .doctrine-section__title {
        font-size: 1.375rem;
    }

    /* Corps : légèrement réduit */
    .doctrine-section__body {
        font-size: 1rem;
    }

    /* Citations : réduction de l'indentation */
    .doctrine-citations {
        gap: var(--space-3);
    }

    .doctrine-citation {
        padding-inline-start: var(--space-3);
    }

    .doctrine-citation__text {
        font-size: 0.9375rem;
    }

    /* Ornement : marges verticales réduites */
    .doctrine-ornament {
        margin-block: var(--space-6);
    }
}

/* ==========================================================================
   PAGE MISE AU POINT — /mise-au-point — Chancellerie de la Maison de Cerf
   Préfixe .map- (mise-au-point).

   Registre visuel : document de chancellerie, plus austère que Doctrine.
   Différences intentionnelles avec Doctrine :
     — Pas de kicker numéroté avant les titres
     — Pas de trait bordeaux ::after sous les h2
     — Pas d'ornement séparateur (pas de .doctrine-ornament)
     — Corps justifié (registre documentaire)
     — Bandeau en ivoire-deep (≠ blanc Doctrine), aligné à gauche
     — Intro en lead italic anthracite (≠ pierre de doctrine-chapeau)
   Alternance de fonds : ivoire / blanc pour les 7 sections.
   Max-width corps : 680 px — cohérent avec doctrine.
   ========================================================================== */

/* ── BANDEAU TITRE (fond ivoire-deep, institutionnel, aligné à gauche) ───── */

.map-hero {
    background-color: var(--color-ivoire-deep);
    padding-block: var(--space-12) var(--space-10);
    border-bottom: 1px solid var(--color-border);
}

.map-hero__inner {
    max-width: 680px;
    margin-inline: auto;
    padding-inline: var(--container-padding);
}

/* Étiquette de page : sans-serif, pierre, small-caps optiques */
.map-hero__label {
    display: block;
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--color-pierre);
    margin-block-end: var(--space-5);
}

/* H1 : Cormorant fin, légèrement plus petit que Doctrine (sobriété) */
.map-hero__title {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 300;
    line-height: var(--leading-tight);
    color: var(--color-anthracite);
    letter-spacing: 0.02em;
    margin-block-end: var(--space-4);
}

/* Sous-titre : italic, pierre, resserré à 52ch */
.map-hero__subtitle {
    font-family: var(--font-heading);
    font-size: clamp(1rem, 1.8vw, 1.25rem);
    font-weight: 400;
    font-style: italic;
    color: var(--color-pierre);
    line-height: var(--leading-relaxed);
    max-width: 52ch;
}

/* ── INTRO CHANCELLERIE (fond blanc, lead italic) ─────────────────────────── */

.map-intro {
    background-color: var(--color-blanc);
    padding-block: var(--space-10) var(--space-12);
}

.map-intro__inner {
    max-width: 680px;
    margin-inline: auto;
    padding-inline: var(--container-padding);
}

/* Étiquette institutionnelle optionnelle (ex. : "La Chancellerie expose") */
.map-intro__label {
    display: block;
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--color-bordeaux);
    margin-block-end: var(--space-5);
    padding-block-end: var(--space-4);
    border-bottom: 1px solid var(--color-border);
}

/* Lead italic : anthracite (plus sévère que le pierre de doctrine-chapeau) */
.map-intro__text {
    font-family: var(--font-heading);
    font-size: clamp(1.0625rem, 1.8vw, 1.25rem);
    font-weight: 400;
    font-style: italic;
    line-height: var(--leading-relaxed);
    color: var(--color-anthracite);
}

.map-intro__text p {
    margin-block-end: var(--space-4);
}

.map-intro__text p:last-child {
    margin-block-end: 0;
}

/* ── SECTIONS — bloc de base + variantes de fond ─────────────────────────── */
/* Alternance conseillée : ivoire → blanc → ivoire → blanc → ivoire →        */
/*                         blanc → ivoire (7 sections)                        */

.map-section {
    padding-block: var(--space-12);
}

.map-section--blanc {
    background-color: var(--color-blanc);
}

.map-section--ivoire {
    background-color: var(--color-ivoire);
}

/* ── INNER — colonne étroite centrée (680 px) ────────────────────────────── */

.map-section__inner {
    max-width: 680px;
    margin-inline: auto;
    padding-inline: var(--container-padding);
}

/* ── TITRE — h2 sérifé poids 400, sans décoration bordeaux ───────────────── */
/* Distinction fondamentale avec Doctrine : aucun ::after bordeaux,           */
/* aucun kicker — le titre porte seul tout le poids du texte.                 */

.map-section__title {
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 3.5vw, 2.25rem);
    font-weight: 400;
    line-height: var(--leading-tight);
    color: var(--color-anthracite);
    letter-spacing: 0.01em;
    margin-block-end: var(--space-6);
}

/* ── CORPS — Cormorant 17 px, interligne 1.8, justifié (chancellerie) ──────  */

.map-section__body {
    font-family: var(--font-heading);
    font-size: 1.0625rem;
    line-height: 1.8;
    color: var(--color-anthracite);
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
}

.map-section__body p {
    margin-block-end: var(--space-5);
}

.map-section__body p:last-child {
    margin-block-end: 0;
}

.map-section__body a {
    color: var(--color-bordeaux);
    text-decoration-color: var(--color-bordeaux-pale);
    text-underline-offset: 0.2em;
    transition: text-decoration-color var(--transition-fast);
}

.map-section__body a:hover,
.map-section__body a:focus-visible {
    text-decoration-color: var(--color-bordeaux);
}

/* ── CLÔTURE — italic, centré, sobre (sans ornement) ─────────────────────── */

.map-closing {
    background-color: var(--color-blanc);
    padding-block: var(--space-12);
    border-top: 1px solid var(--color-border);
    text-align: center;
}

.map-closing__inner {
    max-width: 520px;
    margin-inline: auto;
    padding-inline: var(--container-padding);
}

/* Texte de clôture : italic, pierre — sobre, pas de citation entre guillemets */
.map-closing__text {
    font-family: var(--font-heading);
    font-size: clamp(1rem, 1.8vw, 1.1875rem);
    font-style: italic;
    font-weight: 400;
    line-height: var(--leading-relaxed);
    color: var(--color-pierre);
}

.map-closing__text p {
    margin-block-end: var(--space-4);
}

.map-closing__text p:last-child {
    margin-block-end: 0;
}

/* Lieu et date : signature institutionnelle en sans-serif discret */
.map-closing__date {
    display: block;
    margin-block-start: var(--space-6);
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--color-pierre);
}

/* ── SUBNAV — navigation contextuelle (pattern doctrine-subnav) ───────────── */

.map-subnav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-block: var(--space-10);
    padding-inline: var(--space-4);
    max-width: 680px;
    margin-inline: auto;
    gap: var(--space-6);
}

.map-subnav__prev,
.map-subnav__next {
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--color-pierre);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.map-subnav__prev:hover,
.map-subnav__prev:focus-visible,
.map-subnav__next:hover,
.map-subnav__next:focus-visible {
    color: var(--color-bordeaux);
}

.map-subnav__prev::before {
    content: '←\00a0';
}

.map-subnav__next::after {
    content: '\00a0→';
}

/* ==========================================================================
   PAGE ARCHIVES
   Les sections réutilisent .doctrine-section / .doctrine-section__inner.
   Ce module ajoute uniquement les éléments propres à la page Archives.
   ========================================================================== */

/* ── HERO ─────────────────────────────────────────────────────────────────── */

.arch-hero {
    position: relative;
    background-color: var(--color-blanc);
    padding-block: var(--space-12) var(--space-10);
    text-align: center;
}

.arch-hero::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    height: var(--space-10);
    background-color: var(--color-bordeaux);
    opacity: 0.5;
}

.arch-hero__eyebrow {
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--color-pierre);
    margin-block-end: var(--space-5);
}

.arch-hero__title {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 300;
    line-height: var(--leading-tight);
    color: var(--color-anthracite);
    letter-spacing: 0.02em;
    margin-block-end: var(--space-5);
}

.arch-hero__subtitle {
    font-family: var(--font-heading);
    font-size: clamp(1.0625rem, 2vw, 1.25rem);
    font-weight: 400;
    font-style: italic;
    color: var(--color-pierre);
    max-width: 52ch;
    margin-inline: auto;
    line-height: var(--leading-relaxed);
}

/* ── ENTRÉES D'INSTITUTIONS ───────────────────────────────────────────────── */

.arch-entries {
    margin-block-start: var(--space-6);
}

/* h3 institution : bordure bordeaux inline-start, marge généreuse au-dessus */
.arch-institution {
    font-family: var(--font-heading);
    font-size: var(--text-md);
    font-weight: 400;
    line-height: var(--leading-tight);
    color: var(--color-anthracite);
    border-inline-start: 3px solid var(--color-bordeaux);
    padding-inline-start: var(--space-5);
    margin-block: var(--space-8) var(--space-4);
}

.arch-entries > .arch-institution:first-child {
    margin-block-start: var(--space-5);
}

/* ── CONCLUSION ───────────────────────────────────────────────────────────── */

.arch-conclusion {
    background-color: var(--color-blanc);
    padding-block: var(--space-12);
}

.arch-conclusion__inner {
    max-width: 680px;
    margin-inline: auto;
    padding-inline: var(--container-padding);
    text-align: center;
}

.arch-conclusion__text {
    font-family: var(--font-heading);
    font-size: clamp(1.0625rem, 1.8vw, 1.25rem);
    font-style: italic;
    font-weight: 400;
    line-height: var(--leading-relaxed);
    color: var(--color-pierre);
}

.arch-conclusion__text p {
    margin-block-end: var(--space-4);
}

.arch-conclusion__text p:last-child {
    margin-block-end: 0;
}

/* ── RESPONSIVE ≤ 640 px ──────────────────────────────────────────────────── */

@media (max-width: 640px) {
    .arch-hero {
        padding-block: var(--space-10) var(--space-8);
        text-align: left;
    }

    .arch-hero::after {
        display: none;
    }

    .arch-hero__title {
        font-size: clamp(1.75rem, 8vw, 2.25rem);
    }

    .arch-hero__subtitle {
        max-width: none;
        font-size: 1.0625rem;
    }

    .arch-institution {
        font-size: var(--text-base);
        margin-block: var(--space-6) var(--space-3);
    }

    .arch-entries > .arch-institution:first-child {
        margin-block-start: var(--space-4);
    }

    .arch-conclusion {
        padding-block: var(--space-10);
    }

    .arch-conclusion__inner {
        max-width: none;
    }

    .arch-conclusion__text {
        font-size: 1.0625rem;
    }
}

/* ── PREFERS-REDUCED-MOTION ───────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .arch-hero::after {
        transition: none;
    }
}

/* ── REVEAL — décalages en cascade pour les enfants directs des sections ──── */

.map-section__inner > .reveal:nth-child(1) { transition-delay: 0ms;   }
.map-section__inner > .reveal:nth-child(2) { transition-delay: 80ms;  }
.map-section__inner > .reveal:nth-child(3) { transition-delay: 160ms; }

/* ── PREFERS-REDUCED-MOTION ──────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .map-section__inner > .reveal:nth-child(1),
    .map-section__inner > .reveal:nth-child(2),
    .map-section__inner > .reveal:nth-child(3) {
        transition-delay: 0ms;
    }

    .map-section__body a {
        transition: none;
    }
}

/* ── RESPONSIVE — mobile ≤ 640 px ────────────────────────────────────────── */

@media (max-width: 640px) {

    /* Bandeau : espacement réduit */
    .map-hero {
        padding-block: var(--space-10) var(--space-8);
    }

    .map-hero__title {
        font-size: clamp(1.75rem, 8vw, 2.25rem);
    }

    /* Contrainte de largeur levée : le texte prend toute la largeur */
    .map-hero__subtitle {
        max-width: none;
        font-size: 1.0625rem;
    }

    /* Intro : espacement réduit */
    .map-intro {
        padding-block: var(--space-8) var(--space-10);
    }

    /* Sections : espacement vertical réduit */
    .map-section {
        padding-block: var(--space-10);
    }

    /* Padding légèrement plus généreux que le container global (1rem)
       pour éviter que le corps justifié ne colle aux bords */
    .map-section__inner {
        padding-inline: var(--space-5);
    }

    /* Titre : taille fixe, lisible sans font-size fluide */
    .map-section__title {
        font-size: 1.5rem;
    }

    /* Corps : taille réduite + désactivation du justify
       (les blancs inter-mots deviennent disgracieux sur moins de 400 px) */
    .map-section__body {
        font-size: 1rem;
        text-align: left;
    }

    /* Clôture : espacement réduit, colonne full-width */
    .map-closing {
        padding-block: var(--space-10);
    }

    .map-closing__inner {
        max-width: none;
    }
}