/**
 * Encyclomédia Chrono — contrat visuel commun aux pages Uncode natives.
 *
 * Le détail du design reste pilotable dans les quatre modèles Content Blocks.
 * Ce fichier garantit seulement les états fonctionnels, la frise, les filtres
 * et les règles validées du design historique.
 */

:root {
    --em-chrono-ink: #111111;
    --em-chrono-muted: #c9c9c9;
    --em-chrono-secondary: #6f6f6f;
    --em-chrono-line: rgba(17, 17, 17, 0.16);
    --em-chrono-canvas: #ffffff;
    --em-chrono-card-bg: #111111;
    --em-chrono-card-text: #ffffff;
    --em-chrono-radius: 15px;
    --em-chrono-nav-left: 5vw;
    --em-chrono-header-offset: 0px;
    --em-chrono-scroll-offset: calc(var(--em-chrono-header-offset) + 118px);
}

/* -------------------------------------------------------------------------
   Titre
   ------------------------------------------------------------------------- */
/* Les familles typographiques héritent volontairement d’Uncode. Le plugin
   ne charge ni ne force aucune police afin de respecter la charte du site. */

.em-chrono-page .em-chrono-header {
    overflow: visible;
}

.em-chrono-page .em-chrono-header__column,
.em-chrono-page .em-chrono-header__title,
.em-chrono-page .em-chrono-header__title .heading-text,
.em-chrono-page .em-chrono-header__title .heading-text > * {
    overflow: visible !important;
}

.em-chrono-page .em-chrono-header__title {
    margin: 0 !important;
    padding: 0 0 clamp(24px, 4vw, 64px) !important;
    line-height: 0.9 !important;
}

.em-chrono-page .em-chrono-header__title .heading-text,
.em-chrono-page .em-chrono-header__title .heading-text > *,
.em-chrono-page .em-chrono-header__title h1,
.em-chrono-page .em-chrono-header__title h2 {
    line-height: 0.9 !important;
    margin: 0 !important;
}

.em-chrono-header__title-label,
.em-chrono-header__title-period,
.em-chrono-header__title-single {
    display: block;
}

.em-chrono-header__title-label {
    font-size: 0.58em;
    line-height: 1.02;
    margin-bottom: 0.15em;
}

.em-chrono-header__title-period {
    white-space: nowrap;
}

.em-chrono-page .em-chrono-intro {
    position: relative;
    z-index: 1;
}

.em-chrono-page .em-chrono-intro__text {
    max-width: 1180px;
    margin-inline: auto;
    line-height: 1.2;
}

/* -------------------------------------------------------------------------
   Années et événements
   ------------------------------------------------------------------------- */
.em-chrono-page .em-chrono-year {
    scroll-margin-top: var(--em-chrono-scroll-offset);
}

.em-chrono-page .em-chrono-year__title,
.em-chrono-page .em-chrono-year__title *,
.em-chrono-page .em-chrono-year__title .heading-text,
.em-chrono-page .em-chrono-year__title .heading-text > * {
    color: var(--em-chrono-muted) !important;
    text-align: center !important;
    line-height: 0.9 !important;
    transition: color 360ms ease;
}

.em-chrono-page .em-chrono-year.is-active .em-chrono-year__title,
.em-chrono-page .em-chrono-year.is-active .em-chrono-year__title *,
.em-chrono-page .em-chrono-year__title.is-active,
.em-chrono-page .em-chrono-year__title.is-active * {
    color: var(--em-chrono-ink) !important;
}

.em-chrono-page .em-chrono-event {
    scroll-margin-top: var(--em-chrono-scroll-offset);
    transition: opacity 320ms ease;
}

.em-chrono-page .em-chrono-event[hidden],
.em-chrono-page .em-chrono-year[hidden],
.em-chrono-page .em-chrono-block-host[hidden] {
    display: none !important;
}

.em-chrono-page .em-chrono-event--simple {
    position: relative;
    border-bottom: 0;
}

/* Un séparateur n’est ajouté que si le modèle Uncode le demande explicitement. */
.em-chrono-page .em-chrono-event--with-divider {
    border-bottom: 1px solid var(--em-chrono-line);
}

.em-chrono-page .em-chrono-event--simple .em-chrono-event__date,
.em-chrono-page .em-chrono-event--simple .em-chrono-event__date * {
    color: var(--em-chrono-ink) !important;
    text-align: center !important;
    line-height: 1.05 !important;
}

.em-chrono-page .em-chrono-event--simple .em-chrono-event__title,
.em-chrono-page .em-chrono-event--simple .em-chrono-event__content,
.em-chrono-page .em-chrono-event--simple .em-chrono-event__source {
    max-width: 1040px;
    margin-inline: auto;
}

/* Les références restent conservées dans le JSON et la Base Chrono,
   mais ne font pas partie du dessin public par défaut. Une page peut les
   réactiver explicitement avec la classe body em-chrono-sources-visible. */
.em-chrono-page .em-chrono-event__source {
    display: none !important;
    color: var(--em-chrono-secondary);
    font-size: 0.82em;
    margin-top: 1em;
}

.em-chrono-page.em-chrono-sources-visible .em-chrono-event__source {
    display: block !important;
}

.em-chrono-page .em-chrono-event__source a {
    color: inherit;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
}

/* Les cartes enrichies sont noires par défaut et restent exceptionnelles. */
.em-chrono-page .em-chrono-enriched-card {
    border-radius: var(--em-chrono-radius);
    overflow: hidden;
}

.em-chrono-page .em-chrono-enriched-card:not(.em-chrono-card-color-custom) {
    background: var(--em-chrono-card-bg) !important;
    color: var(--em-chrono-card-text) !important;
}

/* Certaines versions d’Uncode insèrent un calque de fond dans les rangées.
   Il doit suivre le noir de la carte, sinon une ancienne couleur de palette
   peut rester visible au-dessus de la rangée intérieure. */
.em-chrono-page .em-chrono-enriched-card:not(.em-chrono-card-color-custom) > .row-background,
.em-chrono-page .em-chrono-enriched-card:not(.em-chrono-card-color-custom) > .background-element,
.em-chrono-page .em-chrono-enriched-card:not(.em-chrono-card-color-custom) .row-background,
.em-chrono-page .em-chrono-enriched-card:not(.em-chrono-card-color-custom) .background-element {
    background: var(--em-chrono-card-bg) !important;
    background-color: var(--em-chrono-card-bg) !important;
}

.em-chrono-page .em-chrono-enriched-card:not(.em-chrono-card-color-custom) .em-chrono-event__date,
.em-chrono-page .em-chrono-enriched-card:not(.em-chrono-card-color-custom) .em-chrono-event__date *,
.em-chrono-page .em-chrono-enriched-card:not(.em-chrono-card-color-custom) .em-chrono-event__title,
.em-chrono-page .em-chrono-enriched-card:not(.em-chrono-card-color-custom) .em-chrono-event__title *,
.em-chrono-page .em-chrono-enriched-card:not(.em-chrono-card-color-custom) .em-chrono-event__content,
.em-chrono-page .em-chrono-enriched-card:not(.em-chrono-card-color-custom) .em-chrono-event__content *,
.em-chrono-page .em-chrono-enriched-card:not(.em-chrono-card-color-custom) .em-chrono-event__source,
.em-chrono-page .em-chrono-enriched-card:not(.em-chrono-card-color-custom) .em-chrono-event__source * {
    color: var(--em-chrono-card-text) !important;
}

.em-chrono-page .em-chrono-event--enriched {
    border-bottom: 0;
}

.em-chrono-page .em-chrono-image-right .em-chrono-image-column {
    order: 2;
}

.em-chrono-page .em-chrono-image-right .em-chrono-body-column {
    order: 1;
}

/* L'atténuation reprend le principe historique sans filtre grayscale coûteux. */
.em-chrono-enhanced .em-chrono-event.is-active {
    opacity: 1;
}

.em-chrono-enhanced .em-chrono-event.is-near {
    opacity: 0.72;
}

.em-chrono-enhanced .em-chrono-event.is-far {
    opacity: 0.44;
}

/* -------------------------------------------------------------------------
   Filtres
   ------------------------------------------------------------------------- */
.em-chrono-controls-row {
    position: relative;
    z-index: 30;
}

.em-chrono-controls {
    width: 100%;
}

.em-chrono-filterbar {
    width: min(100%, 1380px);
    margin-inline: auto;
    padding: 10px 0 24px;
}

.em-chrono-filterbar__scroller {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.em-chrono-filter {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 8px 14px;
    border: 1px solid currentColor;
    border-radius: 999px;
    background: transparent;
    color: var(--em-chrono-ink);
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background-color 180ms ease, color 180ms ease, transform 180ms ease;
}

.em-chrono-filter:hover {
    transform: translateY(-1px);
}

.em-chrono-filter:focus-visible {
    outline: 2px solid var(--em-chrono-ink);
    outline-offset: 3px;
}

.em-chrono-filter[aria-pressed="true"] {
    background: var(--em-chrono-ink);
    color: var(--em-chrono-canvas);
}

.em-chrono-filter__count {
    min-width: 1.5em;
    padding: 0.2em 0.42em;
    border-radius: 999px;
    background: rgba(127, 127, 127, 0.16);
    font-size: 0.78em;
    text-align: center;
}

.em-chrono-filter[aria-pressed="true"] .em-chrono-filter__count {
    background: rgba(255, 255, 255, 0.18);
}

.em-chrono-filterbar__status {
    margin: 12px 0 0;
    color: var(--em-chrono-secondary);
    font-size: 13px;
    text-align: center;
}

.em-chrono-noscript {
    padding: 12px;
    border: 1px solid var(--em-chrono-line);
}

/* -------------------------------------------------------------------------
   Frise latérale desktop
   ------------------------------------------------------------------------- */
.em-chrono-nav {
    position: fixed;
    top: max(20vh, calc(var(--em-chrono-header-offset) + 28px));
    bottom: 10vh;
    left: var(--em-chrono-nav-left);
    z-index: 100;
    width: 180px;
    max-height: none;
    overflow: auto;
    color: var(--em-chrono-ink);
    opacity: 0;
    visibility: hidden;
    transform: translateX(-24px);
    transition: opacity 320ms ease, transform 320ms ease, visibility 0s linear 320ms;
    scrollbar-width: none;
    overscroll-behavior: contain;
}

.em-chrono-nav::-webkit-scrollbar {
    display: none;
}

.em-chrono-nav.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    transition-delay: 0s;
}

.em-chrono-nav__list {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

/* Uncode applique parfois ses propres puces via ::before aux éléments <li>.
   La frise ne doit afficher aucun point parasite à côté des années. */
.em-chrono-nav__year {
    list-style: none !important;
}

.em-chrono-nav__year::marker {
    content: "";
    font-size: 0;
}

.em-chrono-nav__year::before,
.em-chrono-nav__year::after,
.em-chrono-nav__year-link::before,
.em-chrono-nav__year-link::after,
.em-chrono-nav__tick::before,
.em-chrono-nav__tick::after {
    content: none !important;
    display: none !important;
}

.em-chrono-nav__year {
    margin: 0 0 34px;
    padding: 0;
    opacity: 0.46;
    transition: opacity 200ms ease;
}

.em-chrono-nav__year.is-active {
    opacity: 1;
}

.em-chrono-nav__year-link {
    display: inline-block;
    margin: 0 0 10px;
    color: inherit;
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
}

.em-chrono-nav__year-link:visited,
.em-chrono-nav__tick:visited {
    color: inherit;
}

.em-chrono-nav__ticks {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.em-chrono-nav__tick {
    display: block;
    width: 15px;
    color: inherit;
    height: 2px;
    background: currentColor;
    opacity: 0.3;
    transform-origin: left center;
    transition: width 220ms ease, opacity 220ms ease, transform 160ms ease;
}

.em-chrono-nav__tick:hover,
.em-chrono-nav__tick:focus-visible {
    width: 24px;
    opacity: 0.7;
}

.em-chrono-nav__tick.is-active {
    width: 30px;
    opacity: 1;
}

/* -------------------------------------------------------------------------
   Responsive
   ------------------------------------------------------------------------- */
@media (min-width: 1025px) and (max-width: 1280px) {
    :root {
        --em-chrono-nav-left: 1vw;
    }
    .em-chrono-nav {
        width: 96px;
    }
    .em-chrono-nav__year-link {
        font-size: 18px;
    }
}

@media (max-width: 1024px) {
    :root {
        --em-chrono-mobile-nav-height: 58px;
        --em-chrono-scroll-offset: calc(var(--em-chrono-header-offset) + var(--em-chrono-mobile-nav-height) + 12px);
    }

    .em-chrono-header__title-period {
        white-space: normal;
    }

    .em-chrono-filterbar__scroller {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        padding: 2px max(16px, env(safe-area-inset-left)) 8px;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
    }

    .em-chrono-filterbar__scroller::-webkit-scrollbar {
        display: none;
    }

    .em-chrono-filter {
        flex: 0 0 auto;
        scroll-snap-align: start;
    }

    .em-chrono-nav {
        top: calc(var(--em-chrono-header-offset) + env(safe-area-inset-top));
        right: 0;
        bottom: auto;
        left: 0;
        width: 100%;
        height: var(--em-chrono-mobile-nav-height);
        padding: 5px max(8px, env(safe-area-inset-right)) 5px max(8px, env(safe-area-inset-left));
        box-sizing: border-box;
        overflow-x: auto;
        overflow-y: hidden;
        background: rgba(255, 255, 255, 0.94);
        border-bottom: 1px solid var(--em-chrono-line);
        box-shadow: 0 5px 14px rgba(17, 17, 17, 0.05);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        transform: translateY(-110%);
        scroll-snap-type: x mandatory;
    }

    .em-chrono-nav.is-visible {
        transform: translateY(0);
    }

    /* Compatibilité défensive : même si une ancienne version du script laisse
       la classe is-dark dans le DOM, la frise reste claire et lisible. */
    .em-chrono-nav.is-dark {
        background: rgba(255, 255, 255, 0.96);
        color: var(--em-chrono-ink);
        border-bottom-color: var(--em-chrono-line);
        box-shadow: 0 5px 14px rgba(17, 17, 17, 0.05);
    }

    .em-chrono-nav__list {
        display: flex;
        align-items: center;
        width: max-content;
        min-width: 100%;
        height: 100%;
    }

    .em-chrono-nav__year {
        display: flex;
        flex: 0 0 calc((100vw - 16px) / 5);
        width: calc((100vw - 16px) / 5);
        height: 100%;
        margin: 0;
        padding: 0 4px;
        box-sizing: border-box;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        scroll-snap-align: center;
    }

    .em-chrono-nav__year-link {
        margin: 0 0 3px;
        padding: 3px 5px;
        font-size: 13px;
        line-height: 1;
        text-align: center;
    }

    .em-chrono-nav__ticks {
        display: grid;
        grid-template-columns: repeat(var(--em-chrono-tick-count, 1), minmax(0, 1fr));
        width: min(100%, var(--em-chrono-ticks-width, 15px));
        min-height: 5px;
        height: 5px;
        column-gap: 0.5px;
        align-items: center;
        justify-content: center;
        overflow: visible;
    }

    /* Chaque événement produit réellement un trait. Même une année très dense
       (34 événements dans le corpus 1980–1999) conserve tous ses jalons. */
    .em-chrono-nav__tick {
        display: block;
        width: 100%;
        min-width: 0;
        max-width: none;
        height: 2px;
        opacity: 0.28;
    }

    .em-chrono-nav__tick:hover,
    .em-chrono-nav__tick:focus-visible {
        width: 100%;
        opacity: 0.72;
    }

    .em-chrono-nav__tick.is-active {
        width: 100%;
        max-width: none;
        height: 4px;
        opacity: 1;
    }

    .em-chrono-page .em-chrono-event--simple .em-chrono-event__title,
    .em-chrono-page .em-chrono-event--simple .em-chrono-event__content,
    .em-chrono-page .em-chrono-event--simple .em-chrono-event__source {
        max-width: 100%;
    }
}

@media (max-width: 767px) {
    .em-chrono-page .em-chrono-header__title {
        padding-bottom: 28px !important;
    }

    .em-chrono-header__title-label {
        font-size: 0.52em;
        line-height: 1.08;
    }

    .em-chrono-page .em-chrono-year__title,
    .em-chrono-page .em-chrono-year__title * {
        font-size: clamp(76px, 24vw, 116px) !important;
    }

    .em-chrono-page .em-chrono-image-right .em-chrono-image-column,
    .em-chrono-page .em-chrono-image-right .em-chrono-body-column {
        order: initial;
    }

    .em-chrono-enhanced .em-chrono-event.is-near {
        opacity: 0.84;
    }

    .em-chrono-enhanced .em-chrono-event.is-far {
        opacity: 0.66;
    }
}

@media (prefers-reduced-motion: reduce) {
    .em-chrono-page .em-chrono-year__title,
    .em-chrono-page .em-chrono-event,
    .em-chrono-filter,
    .em-chrono-nav,
    .em-chrono-nav__year,
    .em-chrono-nav__tick {
        transition: none !important;
        scroll-behavior: auto !important;
    }
}

@media print {
    .em-chrono-controls-row,
    .em-chrono-nav {
        display: none !important;
    }
    .em-chrono-event,
    .em-chrono-year,
    .em-chrono-block-host {
        display: block !important;
        opacity: 1 !important;
    }
}