.hob-history-map-page .hob-main { padding: 0; }
html:has(body.hob-history-map-page) { scroll-behavior: auto; }
.history-map {
    --hm-ink: #0c2030;
    --hm-paper: #f8f3f0;
    --hm-brass: #fff;
    position: relative; overflow: clip; background: var(--hm-ink); color: var(--hm-paper);
    font-family: var(--hob-body-font);
}
.history-map__stage { position: relative; height: 100vh; height: 100dvh; min-height: 360px; isolation: isolate; }
.history-map__map { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .6s ease; }
.history-map.is-ready .history-map__map { opacity: 1; }
.history-map__shade { position: absolute; inset: 0; pointer-events: none; background:linear-gradient(90deg, rgb(12 32 48 / 100%) 0%, rgb(12 32 48 / 20%) 45%, transparent 58%); }
.history-map__overlay { position: absolute; inset: 0; display: none; pointer-events: none; }
.history-map.is-enhanced .history-map__overlay { display: block; }
.history-map__chapter {
    position: absolute; top: 50%; left: clamp(24px, 5vw, 90px); width: min(34vw, 440px);
    margin-top: -25vh; opacity: 0; visibility: hidden; color: var(--hm-paper);
}
.history-map__copy { position: relative; z-index: 1; }
.history-map__chapter h2, .history-map__entry h2, .history-map__transcript h1 {
    margin: 12px 0 22px; color: inherit; font-family: var(--hob-serif-font); font-style: italic;
    font-size: 32px !important; font-weight: 400; line-height: 1.12; text-wrap: balance;
}
.history-map .history-map__eyebrow { margin: 0 0 8px; color: var(--hm-brass); font-size: 10px; line-height: 1.5; text-transform: uppercase; letter-spacing: .16em; }
.history-map__eyebrow span { display: inline-block; padding-right: 16px; margin-right: 12px; border-right: 1px solid rgb(211 198 172 / 35%); }
.history-map__date { margin: 0; color: var(--hm-brass); font-family: var(--hob-serif-font); font-size: 14px; font-style: italic; }
.history-map__paragraph { margin: 0 0 14px; font-size: 13px; line-height: 1.75; font-weight: 400; }
.history-map__archive { margin: 26px 0 0; }
.history-map__archive img { display: block; width: 100%; height: min(21vh, 210px); object-fit: contain; object-position: left center; }
.history-map__archive figcaption { max-width: 360px; margin-top: 10px; font-size: 10px; line-height: 1.6; color: var(--hm-brass); }
.history-map__chapter--portrait .history-map__archive { position: absolute; top: 12px; left: calc(100% + 35px); width: min(13vw, 170px); margin: 0; }
.history-map__chapter--portrait .history-map__archive img { height: min(28vh, 260px); }
.history-map__chapter--wide .history-map__archive img { height: min(24vh, 240px); width: 115%; }
.history-map__chapter--minimal { margin-top: -16vh; }
.history-map__loading { position: absolute; inset: 45% 0 auto; text-align: center; color: var(--hm-brass); font-family: var(--hob-serif-font); font-style: italic; font-size: 20px; }
.history-map__indicator { display: none; position: absolute; bottom: 42px; left: 5%; right: 5%; align-items: center; gap: 24px; pointer-events: none; font-size: 9px; text-transform: uppercase; letter-spacing: .12em; color: var(--hm-brass); }
.history-map.is-enhanced .history-map__indicator { display: flex; }
.history-map__track { height: 1px; flex: 1; background: rgb(211 198 172 / 20%); }
.history-map__track i { display: block; height: 1px; background: var(--hm-brass); transform: scaleX(0); transform-origin: left; }
.history-map__boat { width: 62px; height: 62px; pointer-events: none; }
.history-map__boat img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; }
.history-map__boat img.is-visible { opacity: 1; }

.history-map__skip { position: absolute; top: 12px; left: 20px; z-index: 5; padding: 10px 14px; background: var(--hm-paper); color: var(--hm-ink); transform: translateY(-200%); }
.history-map__skip:focus { transform: none; }
.history-map__read { position: absolute; top: 28px; left: 5%; color: var(--hm-brass); font-size: 10px; letter-spacing: .08em; text-underline-offset: 5px; }
.history-map__transcript { max-width: 1040px; margin: auto; padding: 90px 28px; scroll-margin-top: var(--hob-header-height); }
.history-map__entry { margin: 90px 0; display: grid; grid-template-columns: 1fr .65fr; gap: 48px; align-items: center; }
.history-map__entry:not(:has(figure)) { display: block; max-width: 680px; }
.history-map__entry .history-map__archive img { height: auto; max-height: 380px; }
.history-map.is-enhanced .history-map__transcript:not(:focus):not(:focus-within):not(:target) { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); }
.history-map:not(.is-enhanced) .history-map__stage { display: none; }
.history-map.is-loading .history-map__stage { display: block; }
@media (max-width: 1000px) {
    .history-map__chapter { width: min(41vw, 380px); }
    .history-map__chapter--portrait .history-map__archive { position: static; width: 100%; margin-top: 20px; }
    .history-map__chapter--portrait .history-map__archive img { height: 16vh; }
}
@media (max-width: 767px) {
    .history-map__shade { background: linear-gradient(0deg, rgb(12 32 48 / 98%) 0%, rgb(12 32 48 / 94%) 28%, rgb(12 32 48 / 55%) 46%, transparent 63%); }
    .history-map__chapter, .history-map__chapter--minimal { top: auto; bottom: 72px; left: 22px; right: 22px; width: auto; margin-top: 0; }
    .history-map__chapter h2 { font-size: 28px; margin: 8px 0 12px; }
    .history-map__paragraph { font-size: 12px; line-height: 1.65; margin-bottom: 9px; }
    .history-map .history-map__eyebrow { font-size: 9px; margin-bottom: 4px; }
    .history-map__date { font-size: 12px; }
    .history-map__archive, .history-map__chapter--portrait .history-map__archive { width: auto; margin: 12px 0 0; width: 100%; display: flex; align-items: center; gap: 12px; }
    .history-map__archive img, .history-map__chapter--portrait .history-map__archive img, .history-map__chapter--wide .history-map__archive img { height: 76px; width: 106px; flex-shrink: 0; }
    .history-map__archive figcaption { font-size: 9px; margin: 0; max-width: 220px; }
    .history-map__boat { width: 46px; height: 46px; }
    .history-map__indicator { bottom: 38px; gap: 12px; font-size: 8px; }
    .history-map__read { top: 20px; font-size: 9px; }
    .history-map__entry { display: block; margin: 64px 0; }
    .history-map__entry .history-map__archive { display: block; }
    .history-map__entry .history-map__archive img { width: 100%; max-height: 320px; }
    .history-map__entry .history-map__archive figcaption { margin-top: 12px; }
}
@media (max-height: 650px) {
    .history-map__chapter { top: 18%; margin-top: 0; }
    .history-map__chapter .history-map__archive { display: none; }
    .history-map__chapter h2 { font-size: 25px; }
    .history-map__paragraph { font-size: 12px; line-height: 1.55; }
}
@media (max-width: 767px) and (max-height: 650px) {
    .history-map__chapter { top: auto; bottom: 66px; }
    .history-map__chapter .history-map__paragraph:last-child { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .history-map__map { transition: none; }
    .history-map__stage { display: none !important; }
}

/* Progression sous le header et attribution sans capsule. */
.history-map__indicator {
    top: calc(var(--hob-header-height, 115px) + 12px);
    bottom: auto;
}
.history-map .maplibregl-ctrl-attrib {
    padding: 2px 6px;
    border-radius: 0;
    background: transparent;
    color: var(--hm-ink);
    font-size: 9px;
}
.history-map .maplibregl-ctrl-attrib a { color: var(--hm-ink); }
.history-map .maplibregl-ctrl-attrib-button { display: none; }
@media (max-width: 767px) {
    .history-map__indicator {
        top: calc(var(--hob-mobile-header-height, 86px) + 10px);
        bottom: auto;
    }
}


body.hob-history-map-page .hob-header {
    position: absolute !important;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
}


/* =========================================================
 * HISTORY MAP — OVERLAY PLUS EDITORIAL / TEXTE PLUS PRÉSENT
 * ========================================================= */

/* Le voile gauche prend davantage de place sur l'écran. */
.history-map__shade {
    background:
        linear-gradient(
            90deg,
            rgb(12 32 48 / 100%) 0%,
            rgb(12 32 48 / 92%) 24%,
            rgb(12 32 48 / 72%) 42%,
            rgb(12 32 48 / 38%) 58%,
            rgb(12 32 48 / 12%) 70%,
            transparent 80%
        );
}


/* Zone éditoriale plus large. */
.history-map__chapter {
    left: clamp(32px, 6vw, 110px);
    width: min(42vw, 560px);
    margin-top: -27vh;
}


/* Titres plus présents. */
.history-map__chapter h2,
.history-map__entry h2,
.history-map__transcript h1 {
    margin: 14px 0 24px;

    font-size: clamp(34px, 3.7vw, 58px);
    line-height: 1.08;
}


/* Eyebrow légèrement plus grand. */
.history-map .history-map__eyebrow {
    margin-bottom: 10px;

    font-size: 11px;
    line-height: 1.5;
    letter-spacing: .17em;
}


/* Date légèrement plus grande. */
.history-map__date {
    font-size: 15px;
}


/* Texte principal plus lisible et plus important. */
.history-map__paragraph {
    margin-bottom: 16px;

    font-size: 15px;
    line-height: 1.78;
}


/* Images éditoriales plus grandes. */
.history-map__archive {
    margin-top: 30px;
}

.history-map__archive img {
    height: min(25vh, 260px);
}


/* Légendes légèrement agrandies. */
.history-map__archive figcaption {
    max-width: 420px;

    margin-top: 12px;

    font-size: 11px;
    line-height: 1.6;
}


/* Portraits plus grands. */
.history-map__chapter--portrait .history-map__archive {
    left: calc(100% + 42px);

    width: min(15vw, 210px);
}

.history-map__chapter--portrait .history-map__archive img {
    height: min(32vh, 310px);
}


/* Images wide un peu plus généreuses. */
.history-map__chapter--wide .history-map__archive img {
    width: 120%;
    height: min(28vh, 290px);
}


/* =========================================================
 * MOBILE
 * ========================================================= */

@media (max-width: 767px) {

    .history-map__shade {
        background:
            linear-gradient(
                0deg,
                rgb(12 32 48 / 100%) 0%,
                rgb(12 32 48 / 96%) 24%,
                rgb(12 32 48 / 82%) 38%,
                rgb(12 32 48 / 48%) 50%,
                rgb(12 32 48 / 16%) 60%,
                transparent 70%
            );
    }

    .history-map__chapter,
    .history-map__chapter--minimal {
        left: 20px;
        right: 20px;
        bottom: 68px;
        width: auto;
    }

    .history-map__chapter h2 {
        margin: 10px 0 15px;
        font-size: 34px;
        line-height: 1.08;
    }

    .history-map .history-map__eyebrow {
        margin-bottom: 6px;
        font-size: 11px;
        line-height: 1.5;
    }

    .history-map__date {
        font-size: 14px;
    }

    .history-map__paragraph {
        margin-bottom: 12px;
        font-size: 14.5px;
        line-height: 1.65;
    }

    .history-map__archive,
    .history-map__chapter--portrait .history-map__archive {
        margin-top: 16px;
        gap: 15px;
        width: auto;
    }

    .history-map__archive img,
    .history-map__chapter--portrait .history-map__archive img,
    .history-map__chapter--wide .history-map__archive img {
        width: 138px;
        height: 102px;
    }

    .history-map__archive figcaption {
        max-width: 250px;
        font-size: 11px;
        line-height: 1.5;
    }
}


/* =========================================================
 * HISTORY MAP — LOADING
 * ========================================================= */

.history-map__loading {
    z-index: 30;

    display: flex;
    align-items: center;
    justify-content: center;

    inset: 0;

    opacity: 1;
    visibility: visible;

    background: var(--hm-ink);

    transition:
        opacity .55s ease,
        visibility .55s ease;
}


/*
 * Pendant le loading :
 * rien de l'expérience ne doit apparaître.
 */
.history-map.is-loading .history-map__map,
.history-map.is-loading .history-map__overlay,
.history-map.is-loading .history-map__indicator,
.history-map.is-loading .history-map__read,
.history-map.is-loading .history-map__boat {
    opacity: 0 !important;
    visibility: hidden !important;
}


/*
 * Quand le loading est terminé.
 */
.history-map:not(.is-loading) .history-map__loading {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}


/*
 * On laisse la map apparaître doucement APRÈS le loading.
 */
.history-map:not(.is-loading).is-ready .history-map__map {
    opacity: 1;
    visibility: visible;
}

.history-map.is-loading .history-map__overlay,
.history-map.is-loading .history-map__indicator,
.history-map.is-loading .history-map__read,
.history-map.is-loading .history-map__boat {
    opacity: 0 !important;
    visibility: hidden !important;
}

.history-map__loading {
    z-index: 30;
}