/* home.css */
@import "components/flyer-download-2hrGqIo.css";
@import "components/march-map-jC_cAMR.css";
@import "components/journey-departments-YpdwhaR.css";

/* ========================================
HOME
======================================== */

.intro-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;
}

.intro-arrow svg {
    display: block;

    width: 23px;
    height: 23px;
}

/* ========================================
PREPROD - BUTTONS DISABLED
======================================== */

.action-contribution {
    background: #EDF5E9;
    color: #29613E;
}

.is-disabled {
    background: #d8d8d3 !important;
    border-color: #d8d8d3 !important;
    color: #77776f !important;

    opacity: 0.78;
    cursor: default;
    pointer-events: none;

    box-shadow: none !important;
    transform: none !important;
}

.is-disabled:hover,
.is-disabled:focus {
    background: #d8d8d3 !important;
    border-color: #d8d8d3 !important;
    color: #77776f !important;

    box-shadow: none !important;
    transform: none !important;
}

.home-action.action-disabled {
    position: relative;

    background: #e5e4df;
    border-color: #e5e4df;
    color: #96968f;

    cursor: default;
    pointer-events: none;

    box-shadow: none;
    transform: none;
}

.home-action.action-disabled .action-label,
.home-action.action-disabled strong,
.home-action.action-disabled .arrow {
    color: #96968f;
}

.home-action.action-disabled .action-coming-soon {
    position: absolute;
    top: 18px;
    right: 22px;

    display: inline-block;

    padding: 4px 8px 3px;

    border: 1.5px solid #c96b57;

    color: #c96b57;
    background: rgba(255, 255, 255, 0.3);

    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.11em;
    text-transform: uppercase;

    transform: rotate(-4deg);
}

.home-action.action-disabled:hover {
    transform: none;
    box-shadow: none;
}

/* ========================================
ENCART : QU'EST-CE QUE LA MARCHE ?
======================================== */

.home-intro {
    width: 100%;

    overflow: hidden;

    background:
        linear-gradient(
            90deg,
            #fff0e9 0%,
            #fff4ef 55%,
            #fff0e8 100%
        );
}


/* ========================================
ENCART D'AIDE — CARAMEL DISCRET
======================================== */

.journey-suggestion {
    display: flex;
    align-items: center;
    gap: 18px;
    min-height: 76px;
    margin-bottom: 18px;
    padding: 14px 17px;
    border: 1px solid #f5dab6;
    border-radius: 11px;
    background: #fff4e4;
    color: #593b25;
}

.journey-suggestion-content {
    flex: 1;
    min-width: 0;
}

.journey-suggestion-content h3 {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.3;
}

.journey-suggestion-content p {
    margin: 0;
    color: #6d5948;
    font-size: 12px;
    line-height: 1.5;
}

.journey-suggestion-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;

    gap: 8px;

    min-height: 36px;

    padding: 9px 12px;
    border: 1px solid #f2b561;
    border-radius: 9px;

    background: #f2b561;
    color: #593b25;

    font-size: 12px;
    font-weight: 800;
    line-height: 1.3;
    white-space: nowrap;

    text-decoration: none;

    transition: transform .18s ease, background .18s ease;
}

.journey-suggestion-button:hover {
    color: #593b25;
    background: #eaaa51;
    transform: translateY(-2px);
}

.journey-suggestion-button:focus-visible {
    outline: 2px solid #80522e;
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .journey-suggestion-button {
        transition: none;
    }

    .journey-suggestion-button:hover {
        transform: none;
    }
}

.journey-suggestion-arrow {
    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    color: currentColor;
}

.journey-suggestion-arrow .site-arrow-link {
    width: 16px;
    height: auto;

    display: block;
}

@media (max-width: 650px) {
    .journey-suggestion {
        flex-direction: column;
        align-items: flex-start;
        gap: 9px;
        padding: 13px;
    }

    .journey-suggestion-content h3 {
        font-size: 14px;
    }

    .journey-suggestion-button {
        padding: 6px 9px;
    }
}


/* ========================================
CONTENU DE L'ENCART
======================================== */

.home-intro-inner {
    width: min(
        1880px,
        calc(100% - 80px)
    );

    min-height: 132px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        94px
        1px
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap: 30px;
}


/* ========================================
IMAGE DES PAS
======================================== */

.intro-icon {
    width: 94px;
    height: 78px;

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

    overflow: hidden;
}

.intro-icon img {
    width: 70px !important;
    height: 70px !important;

    min-width: 70px !important;
    min-height: 70px !important;

    max-width: 70px !important;
    max-height: 70px !important;

    display: block;

    object-fit: contain;
}


/* ========================================
SÉPARATEUR
======================================== */

.intro-separator {
    width: 1px;
    height: 80px;

    background: rgba(68, 74, 66, 0.26);
}


/* ========================================
TEXTE ENCART
======================================== */

.intro-content {
    min-width: 0;
}

.intro-content h2 {
    margin: 0 0 5px;

    color: var(--coral);

    font-size: 27px;
    font-weight: 800;

    line-height: 1.1;

    letter-spacing: -0.7px;
}

.intro-content p {
    max-width: 1000px;

    margin: 0;

    color: #66645f;

    font-size: 18px;

    line-height: 1.45;
}


/* ========================================
EN SAVOIR PLUS
======================================== */

.intro-button {
    min-width: 210px;
    min-height: 54px;

    padding: 0 19px;

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

    gap: 20px;

    border: 1px solid #bfc3b9;

    border-radius: 8px;

    background: rgba(255, 255, 255, 0.08);

    color: #30332e;

    font-size: 15px;
    font-weight: 700;

    text-decoration: none;

    transition:
        background 0.16s ease,
        border-color 0.16s ease;
}

.intro-button:hover {
    background: rgba(255, 255, 255, 0.25);

    border-color: #aeb4aa;
}

.intro-arrow {
    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    color: #596057;
}


/* ========================================
HERO
======================================== */

.home-hero {
    width: min(
        var(--page-width),
        calc(100% - 36px)
    );

    margin: 0 auto;

    padding: 18px 0 28px;

    display: flex;
    flex-direction: column;

    gap: 10px;
}


/* ========================================
VIDÉO
======================================== */

.video-wrapper {
    position: relative;

    width: 100%;

    min-height: 0;

    padding: 14px;

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

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #f3f0e8 0%,
            #f7f5ef 48%,
            #edf3e9 100%
        );

    border: 1px solid #e2e4dc;
}

.video-frame {
    position: relative;

    width: min(100%, 420px);
    height: auto;

    aspect-ratio: 9 / 16;

    flex-shrink: 0;

    overflow: hidden;

    background: #111411;

    box-shadow:
        0 14px 34px rgba(29, 42, 30, 0.12),
        0 2px 8px rgba(29, 42, 30, 0.06);
}

.video-frame video {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: contain;

    background: #111411;
}


/* ========================================
CONTENU DROIT DU HERO
======================================== */

.hero-content {
    min-width: 0;

    display: flex;
    flex-direction: column;

    background: #fbfaf6;

    border: 1px solid #e5e5dd;
}


/* ========================================
TEXTE DU HERO
======================================== */

.hero-editorial {
    min-width: 0;

    padding:
        34px
        28px
        24px;

    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.hero-editorial-kicker {
    display: block;

    margin-bottom: 6px;

    color: #80522e;

    font-size: 11px;
    font-weight: 900;

    letter-spacing: 1.7px;

    text-transform: uppercase;
}

.hero-editorial h1 {
    width: 100%;
    max-width: 100%;

    margin:
        0
        0
        22px;

    color: #26342a;

    font-size: clamp(40px, 6.2vw, 64px);
    font-weight: 800;

    line-height: 0.96;

    letter-spacing: -2.4px;

    overflow-wrap: normal;
    word-break: normal;
}

.hero-editorial p {
    max-width: 700px;

    margin: 0;

    color: #666b64;

    font-size: 17px;

    line-height: 1.58;
}


/* ========================================
ACTIONS
======================================== */

.home-actions {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 8px;

    margin-top: 0;

    padding:
        0
        28px;
}

.home-action {
    min-width: 0;
    min-height: 112px;

    padding:
        18px
        20px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    text-decoration: none;

    transition:
        transform 0.16s ease,
        filter 0.16s ease;
}

.home-action:hover {
    transform: translateY(-2px);

    filter: brightness(0.97);
}

.action-label {
    font-size: 10px;
    font-weight: 900;

    letter-spacing: 1.4px;

    text-transform: uppercase;

    opacity: 0.72;
}

.action-bottom {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 12px;
}

.action-bottom strong {
    max-width: 200px;

    font-size: 18px;

    line-height: 1.08;
}

.arrow {
    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;
}

.arrow .site-arrow {
    width: 27px;
    height: auto;

    display: block;
}


/* ========================================
COULEURS ACTIONS
======================================== */

.action-alert {
    background: #de6a63;

    color: #ffffff;
}

.action-alert:hover {
    background: #cc5953;
}

.action-green {
    background: #76c56b;

    color: #16391d;
}

.action-light {
    background: #edf5e9;

    color: #285c31;

    border: 1px solid #d6e7d1;
}

.action-coral {
    background: #de6a63;
    color: #ffffff;
}

.action-coral:hover {
    background: #cc5953;
}


/* ========================================
TEXTE SOUS LES ACTIONS
======================================== */

.hero-after-actions {
    flex: 1;

    min-height: 0;

    padding:
        22px
        28px
        18px;

    display: flex;
    align-items: flex-start;
}

.hero-after-actions p {
    width: 100%;
    max-width: 900px;

    margin: 0;

    color: #616760;

    font-size: 16px;

    line-height: 1.65;
}


/* ========================================
TYPOGRAPHIE
======================================== */

.section-label {
    display: block;

    margin-bottom: 6px;

    color: #80522e;

    font-size: 12px;
    font-weight: 900;

    letter-spacing: 1.5px;

    text-transform: uppercase;
}

.home-hero + section h2,
.movement-section h2,
.journey-section h2,
.recap-section h2,
.support-section h2 {
    margin: 0 0 28px;

    max-width: 780px;

    font-size: clamp(37px, 5vw, 60px);

    line-height: 0.98;

    letter-spacing: -2.2px;
}


/* ========================================
MOUVEMENT
======================================== */

.movement-section {
    padding:
        90px
        max(
            22px,
            calc((100vw - var(--page-width)) / 2)
        );
}

.movement-header {
    margin-bottom: 35px;
}

.movement-number {
    display: block;

    color: var(--green-dark);

    font-size: clamp(56px, 8vw, 92px);
    font-weight: 900;

    line-height: 0.88;

    letter-spacing: -4px;
}

.movement-header span {
    display: block;

    margin-top: 10px;

    color: var(--green-dark);

    font-size: 15px;
    font-weight: 700;
}


/* ========================================
CARTE
======================================== */

.map-placeholder {
    position: relative;

    width: 100%;
    min-height: 440px;

    margin-top: 32px;

    overflow: hidden;

    background: #dfeedd;

    border: 1px solid #cce1c7;
}


/* Image de secours */

.march-map-fallback {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    display: block;

    object-fit: contain;

    background: #f4f0e7;

    z-index: 1;
}


/* Carte interactive */

.march-map {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    z-index: 2;

    opacity: 0;

    transition: opacity 0.18s ease;
}


/* Quand la carte est prête */

.map-placeholder.is-map-ready .march-map {
    opacity: 1;
}

.map-placeholder.is-map-ready .march-map-fallback {
    visibility: hidden;
}


/* Légende au-dessus */

.march-map-legend {
    position: relative;

    z-index: 3;
}

/* ========================================
TRAJET
======================================== */

.journey-section {
    width: min(
        var(--page-width),
        calc(100% - 44px)
    );

    margin: 0 auto;

    padding: 90px 0;

    --route-green: #72bd55;
    --route-green-dark: #4f8d3c;
    --route-green-deep: #244a2c;
    --route-soft: #f3f8f0;
    --route-line: #dfe7dc;
    --route-muted: #747b73;
}

.journey-title-row {
    margin-bottom: 36px;

    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 32px;
}

.journey-title-row h2 {
    margin-bottom: 18px;
}

.journey-intro {
    max-width: 760px;

    margin: 0;

    color: #696d67;

    font-size: 17px;

    line-height: 1.55;
}


/* ========================================
RECHERCHE DÉPARTEMENT
======================================== */

.department-search {
    position: relative;
    margin-bottom: 20px;

    padding: 25px 27px 21px;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1.16fr);

    gap: 38px;
    align-items: center;

    background: #eef5fb;

    border-top: 1px solid #dae8f4;
    border-bottom: 1px solid #dae8f4;
}

.department-search::before {
    content: "";
    position: absolute;
    top: -2px;
    left: 0;
    width: 18%;
    height: 4px;
    background: #94bedc;
}

.department-search-copy {
    align-self: center;
}

.department-search-kicker {
    display: block;

    margin-bottom: 7px;

    color: #477fa7;

    font-size: 13px;
    font-weight: 800;

    letter-spacing: .15em;

    text-transform: uppercase;
}

.department-search-copy h3 {
    margin: 0 0 8px;

    color: #203b50;

    font-size: clamp(25px, 2.5vw, 35px);

    line-height: 1.1;

    letter-spacing: -.045em;
}

.department-search-copy p {
    max-width: none;

    margin: 0;

    color: #617480;

    font-size: 15px;

    line-height: 1.5;
}

.department-search-hint {
    display: block;
    margin-top: 2px;
    font-size: 13px;
}

.department-search-result:empty {
    display: none;
}

.department-search-tool {
    min-width: 0;
    align-self: center;
}

.department-search-field {
    min-height: 58px;

    padding: 0 19px;

    display: flex;
    align-items: center;

    gap: 15px;

    background: #ffffff;

    border: 1px solid #ccdeed;

    box-shadow:
        0
        2px
        5px
        rgba(56, 93, 119, 0.035);
}

.department-search-field:focus-within {
    border-color: #669dc4;

    box-shadow:
        0
        0
        0
        3px
        #cfe5f6;
}

.department-search-field svg {
    width: 20px;
    height: 20px;

    flex: 0 0 20px;

    fill: none;

    stroke: #729ab6;
    stroke-width: 2;
    stroke-linecap: round;
}

.department-search-field input {
    min-width: 0;
    width: 100%;

    padding: 0;

    border: 0;
    outline: 0;

    background: transparent;

    color: #203b50;

    font: inherit;
    font-size: 17px;
}

.department-search-field input::placeholder {
    color: #718593;
}

.department-search-result {
    min-height: 48px;

    margin-top: 10px;

    padding: 0 2px;

    display: flex;
    align-items: center;

    gap: 10px;

    color: #617480;

    font-size: 13px;
}

.department-search-result.is-positive,
.department-search-result.is-negative {
    padding: 10px 12px;

    background: rgba(255, 255, 255, 0.62);

    border-left: 3px solid #94bedc;
}

.department-search-result.is-negative {
    border-left-color: #c96c65;
}

.search-result-icon {
    width: 24px;
    height: 24px;

    flex: 0 0 24px;

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

    border-radius: 50%;

    background: #dae8f4;

    color: #477fa7;

    font-size: 15px;
    font-weight: 800;
}

.department-search-result.is-negative .search-result-icon {
    background: #fae9e7;

    color: #b9554e;
}

.department-search-result strong,
.department-search-result small {
    display: block;
}

.department-search-result strong {
    color: #203b50;

    font-size: 13px;
}

.department-search-result small {
    margin-top: 2px;

    color: #617480;

    font-size: 12px;
}


/* ========================================
ONGLETS
======================================== */

.journey-tabs {
    margin-bottom: 2px;

    display: flex;
    align-items: flex-end;

    gap: 6px;

    border-bottom: 1px solid var(--route-line);
}

.journey-tab {
    position: relative;

    min-height: 52px;

    padding: 0 18px;

    border: 0;

    background: transparent;

    color: #747a73;

    font-family: "Nunito Sans", sans-serif;
    font-size: 14px;
    font-weight: 800;

    cursor: pointer;
}

.journey-tab::after {
    content: "";

    position: absolute;

    left: 18px;
    right: 18px;
    bottom: -1px;

    height: 3px;

    background: transparent;
}

.journey-tab:hover {
    color: #344038;
}

.journey-tab.is-active {
    color: var(--route-green-deep);
}

.journey-tab.is-active::after {
    background: var(--route-green);
}

.journey-panel {
    padding-top: 18px;
}

.journey-panel[hidden] {
    display: none;
}


/* ========================================
ORDRE DU TRAJET — ÉTAPES NOVEMBRE 2026
======================================== */

.route-list {
    --route-inset: 16px;
    --route-gutter: 28px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 46px;
    row-gap: 0;
}

.route-list .route-department {
    position: relative;
    display: grid;
    grid-template-columns: 98px 218px minmax(0, 1fr);
    align-items: center;
    column-gap: 16px;
    min-height: 56px;
    margin: 0 0 0 var(--route-gutter);
    padding: 0 92px 0 calc(34px + var(--route-inset) - var(--route-gutter));
    box-sizing: border-box;
    border-bottom: 1px solid #e8ece6;
    background: transparent;
    transition: background .16s ease;
}

/* Fil dans la marge, continu entre les encarts et derrière les points. */
.route-list .route-department::before {
    content: "";
    position: absolute;
    left: -17px;
    top: 0;
    bottom: -5px;
    width: 2px;
    background: #B8AAAA;
    z-index: 1;
    pointer-events: none;
}

.route-list .route-department::after {
    content: "";
    position: absolute;
    left: -22px;
    top: 50%;
    width: 12px;
    height: 12px;
    transform: translateY(-50%);
    border-radius: 50%;
    background: #B8AAAA;
    z-index: 2;
    pointer-events: none;
}

.route-list .route-department.is-start::after,
.route-list .route-department.is-finish::after {
    background: #B8AAAA;
}

/* Au bureau, deux dernières lignes ; sur mobile, uniquement la dernière */
.route-list .route-department:nth-last-child(-n+2)::before {
    bottom: 50%;
}
.route-list .route-department:nth-child(-n+2)::before {
    top: 50%;
}

.route-list .route-position {
    grid-column: 1;
    grid-row: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: start;
    min-width: 88px;
    padding: 8px 12px;
    border-radius: 999px;
    background: #f0f7ef;
    color: #34483a;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0;
    white-space: nowrap;
    text-transform: none;
}

.route-list .route-day {
    grid-column: 2;
    grid-row: 1;
    color: #636b63;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
}

.route-list .route-department-label {
    grid-column: 3;
    grid-row: 1;
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    flex-wrap: wrap;
    min-width: 0;
}

.route-list .route-department-label .route-name,
.route-list .route-department.is-start .route-name,
.route-list .route-department.is-finish .route-name {
    color: var(--department-ink, #34483a);
    font-size: 15px;
    font-weight: 700;
}

.route-list .route-department-label .route-code {
    color: var(--department-ink, #34483a);
    font-size: 14px;
    font-weight: 700;
}

.route-list .route-department .route-marker {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    grid-column: auto;
    justify-self: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 64px;
    box-sizing: border-box;
    padding: 8px 12px;
    border: 1px solid;
    border-radius: 10px;
    font-family: "Nunito", "Nunito Sans", sans-serif;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
    letter-spacing: .25px;
    text-transform: none;
    box-shadow: none;
}
.route-marker-start {
    background: #eaf5e6;
    color: #4d853f;
}
.route-marker-finish {
    background: #fff0ea;
    color: #bd6158;
}

.route-list .route-department.is-search-match {
    padding-left: calc(34px + var(--route-inset) - var(--route-gutter));
    padding-right: 92px;
    background: #f0f8ed;
}

.number-department.is-search-match {
    background: #f0f8ed;
}

/* Proposition 3 : badges régionaux et fond de ligne plus clair. */
.route-list .route-department {
    --route-region: #8ebd93;
    --route-tag-background: var(--route-region);
    background: color-mix(in srgb, var(--route-region) 18%, white);
    border-bottom: 5px solid transparent;
    background-clip: padding-box;
    border-radius: 8px;
}
.route-list .route-department:is([data-department-code="22"], [data-department-code="29"], [data-department-code="35"], [data-department-code="56"]) {
    --route-region: #9ED9E5;
}

.route-list .route-department:is([data-department-code="14"], [data-department-code="27"], [data-department-code="50"], [data-department-code="61"], [data-department-code="76"]) {
    --route-region: #F0C5B8;
}

.route-list .route-department:is([data-department-code="02"], [data-department-code="59"], [data-department-code="60"], [data-department-code="62"], [data-department-code="80"]) {
    --route-region: #B5B5B5;
}

.route-list .route-department:is([data-department-code="75"], [data-department-code="77"], [data-department-code="78"], [data-department-code="91"], [data-department-code="92"], [data-department-code="93"], [data-department-code="94"], [data-department-code="95"]) {
    --route-region: #C8EAF5;
}

.route-list .route-department:is([data-department-code="08"], [data-department-code="10"], [data-department-code="51"], [data-department-code="52"], [data-department-code="54"], [data-department-code="55"], [data-department-code="57"], [data-department-code="67"], [data-department-code="68"], [data-department-code="88"]) {
    --route-region: #FFF59A;
}

.route-list .route-department:is([data-department-code="44"], [data-department-code="49"], [data-department-code="53"], [data-department-code="72"], [data-department-code="85"]) {
    --route-region: #E5B4D0;
}

.route-list .route-department:is([data-department-code="18"], [data-department-code="28"], [data-department-code="36"], [data-department-code="37"], [data-department-code="41"], [data-department-code="45"]) {
    --route-region: #DEC16E;
}

.route-list .route-department:is([data-department-code="21"], [data-department-code="25"], [data-department-code="39"], [data-department-code="58"], [data-department-code="70"], [data-department-code="71"], [data-department-code="89"], [data-department-code="90"]) {
    --route-region: #A9D19A;
}

.route-list .route-department:is([data-department-code="16"], [data-department-code="17"], [data-department-code="19"], [data-department-code="23"], [data-department-code="24"], [data-department-code="33"], [data-department-code="40"], [data-department-code="47"], [data-department-code="64"], [data-department-code="79"], [data-department-code="86"], [data-department-code="87"]) {
    --route-region: #C6DC90;
}

.route-list .route-department:is([data-department-code="01"], [data-department-code="03"], [data-department-code="07"], [data-department-code="15"], [data-department-code="26"], [data-department-code="38"], [data-department-code="42"], [data-department-code="43"], [data-department-code="63"], [data-department-code="69"], [data-department-code="73"], [data-department-code="74"]) {
    --route-region: #8BC3E6;
}

.route-list .route-department:is([data-department-code="09"], [data-department-code="11"], [data-department-code="12"], [data-department-code="30"], [data-department-code="31"], [data-department-code="32"], [data-department-code="34"], [data-department-code="46"], [data-department-code="48"], [data-department-code="65"], [data-department-code="66"], [data-department-code="81"], [data-department-code="82"]) {
    --route-region: #F49B72;
}

.route-list .route-department:is([data-department-code="04"], [data-department-code="05"], [data-department-code="06"], [data-department-code="13"], [data-department-code="83"], [data-department-code="84"]) {
    --route-region: #F8AD35;
}

.route-list .route-department:is([data-department-code="2A"], [data-department-code="2B"]) {
    --route-region: #AADEC3;
}
.route-list .route-position,
.route-list .route-department-label {
    background: var(--route-tag-background);
}

.route-list .route-department-label {
    justify-self: start;
    padding: 9px 12px;
    border-radius: 9px;
}

.route-list .route-department.is-search-match {
    background-color: color-mix(in srgb, var(--route-region) 28%, white);
    box-shadow: inset 0 0 0 2px var(--route-region);
}

@media (max-width: 1250px) {
    .route-list {
        grid-template-columns: 1fr;
    }
    .route-list .route-department:nth-child(-n+2)::before {
        top: 0;
    }
    .route-list .route-department:first-child::before {
        top: 50%;
    }
    .route-list .route-department:nth-last-child(-n+2)::before {
        bottom: -5px;
    }
    .route-list .route-department:last-child::before {
        bottom: 50%;
    }
}

@media (max-width: 700px) {
    .route-list {
        --route-inset: 12px;
    }

    .route-list .route-department {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 5px;
        min-height: 96px;
        padding: 12px 85px 12px calc(27px + var(--route-inset) - var(--route-gutter));
    }
    .route-list .route-position {
        grid-column: 1;
        grid-row: 1;
        min-width: 0;
        padding: 6px 10px;
        font-size: 11px;
    }
    .route-list .route-day {
        grid-column: 1;
        grid-row: 2;
        font-size: 12px;
        white-space: normal;
    }
    .route-list .route-department-label {
        grid-column: 1;
        grid-row: 3;
    }
    .route-list .route-department-label .route-name {
        font-size: 14px;
    }
    .route-list .route-department .route-marker {
        right: 6px;
        padding: 6px 9px;
        font-size: 10px;
    }
    .route-list .route-department.is-search-match {
        padding-left: calc(27px + var(--route-inset) - var(--route-gutter));
        padding-right: 85px;
    }
}

/* ========================================
PAR NUMÉRO DE DÉPARTEMENT
======================================== */

/* Département par numéro : pastille pour le code et pour la date */
.department-number-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 30px;
}

.number-department {
    min-height: 80px;
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-content: center;
    align-items: center;
    column-gap: 16px;
    border-bottom: 1px solid #e8ece6;
    transition: background .16s ease;
}

.number-department-code {
    grid-column: 1;
    grid-row: 1 / 3;
    justify-self: start;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 50px;
    min-height: 38px;
    padding: 6px 10px;
    box-sizing: border-box;
    border-radius: 999px;
    background: #edf7e9;
    color: #346e2a;
    font-size: 17px;
    font-weight: 800;
    line-height: 1;
}

.number-department-name {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    color: #26352e;
    font-size: 15px;
    font-weight: 800;
}

.number-department-position {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 4px;
    color: #858d98;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.6;
}

.number-department-separator {
    color: #858d98;
    font-weight: 700;
}

.number-department-date {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    background: #edf8e9;
    color: #285f2c;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.6;
    white-space: nowrap;
}

@media (max-width: 700px) {
    .number-department {
        grid-template-columns: 53px minmax(0, 1fr);
        column-gap: 12px;
        min-height: 85px;
    }
    .number-department-date {
        white-space: normal;
    }
}

.sr-only {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    padding: 0 !important;
    margin: -1px !important;

    overflow: hidden !important;

    clip: rect(0, 0, 0, 0) !important;

    white-space: nowrap !important;

    border: 0 !important;
}


/* ========================================
RÉCAP
======================================== */

.recap-section {
    padding:
        90px
        max(
            22px,
            calc((100vw - var(--page-width)) / 2)
        );

    background: var(--light-grey);
}

.recap-grid {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 18px;
}

.recap-card {
    overflow: hidden;

    background: #ffffff;

    border: 1px solid var(--border);
}

.recap-image,
.recap-video {
    min-height: 230px;

    background: #e1eadf;
}

.recap-video {
    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--green-dark);

    font-size: 58px;
}

.recap-card > div:last-child {
    padding: 20px;
}

.recap-card span {
    display: block;

    margin-bottom: 7px;

    color: var(--green-dark);

    font-size: 11px;
    font-weight: 900;

    letter-spacing: 1.2px;

    text-transform: uppercase;
}

.recap-card h3 {
    margin: 0;

    font-size: 24px;

    line-height: 1.1;
}


/* ========================================
SOUTENIR
======================================== */
.support-section {
    padding: 95px 22px;

    text-align: center;

    background: #ffffff;
}

.support-section h2 {
    max-width: 900px;

    margin:
        0
        auto;

    font-size: clamp(2.2rem, 3.5vw, 3.4rem);

    line-height: 1.05;

    letter-spacing: -0.035em;
}

.support-section p {
    max-width: 540px;

    margin:
        28px
        auto
        0;

    color: var(--grey);

    font-size: 18px;

    line-height: 1.55;

    text-align: center;
}

.support-button {
    display: inline-block;

    margin-top: 26px;

    padding:
        15px
        28px;

    background: #f2b561;

    color: #593b25;

    font-weight: 900;

    text-decoration: none;
}

.support-button:hover {
    background: #eaaa51;
}

.support-button:focus-visible {
    outline: 2px solid #80522e;
    outline-offset: 3px;
}

/* ========================================
TABLETTE
======================================== */

@media (max-width: 900px) {

    .home-intro-inner {
        width: calc(100% - 40px);

        grid-template-columns:
            62px
            1px
            minmax(0, 1fr);

        gap: 18px;

        padding: 22px 0;
    }

    .intro-icon {
        width: 62px;
        height: 58px;
    }

    .intro-icon img {
        width: 50px !important;
        height: 50px !important;

        min-width: 50px !important;
        min-height: 50px !important;

        max-width: 50px !important;
        max-height: 50px !important;
    }

    .intro-separator {
        height: 64px;
    }

    .intro-button {
        grid-column: 3;

        justify-self: start;
    }

    .region-route-badge {
        display: none;
    }

    .department-stages {
        padding-left: 25px;
    }
}


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

@media (max-width: 760px) {

    .home-intro-inner {
        width: calc(100% - 36px);

        grid-template-columns:
            44px
            minmax(0, 1fr);

        gap: 13px;

        padding: 20px 0;
    }

    .intro-icon {
        width: 44px;
        height: 44px;

        align-self: start;
    }

    .intro-icon img {
        width: 38px !important;
        height: 38px !important;

        min-width: 38px !important;
        min-height: 38px !important;

        max-width: 38px !important;
        max-height: 38px !important;
    }

    .intro-separator {
        display: none;
    }

    .intro-content h2 {
        font-size: 22px;
    }

    .intro-content p {
        font-size: 15px;
    }

    .intro-button {
        grid-column: 2;

        width: 100%;

        min-width: 0;
        min-height: 50px;

        padding: 0 15px;

        font-size: 14px;
    }


    /* HERO */

    .home-hero {
        width: calc(100% - 24px);

        padding:
            10px
            0
            18px;

        display: flex;
        flex-direction: column;

        gap: 7px;
    }

    .hero-content {
        display: contents;
    }

    .hero-editorial {
        order: 1;

        padding:
            30px
            22px
            30px;

        background: #fbfaf6;

        border: 1px solid #e5e5dd;
    }

    .hero-editorial-kicker {
        margin-bottom: 6px;

        font-size: 10px;
    }

    .hero-editorial h1 {
        margin-bottom: 18px;

        font-size:
            clamp(
                38px,
                12vw,
                54px
            );

        line-height: 0.97;

        letter-spacing: -1.7px;
    }

    .hero-editorial p {
        font-size: 15px;

        line-height: 1.55;
    }

    .video-wrapper {
        order: 2;

        min-height: 0;

        padding: 14px;
    }

    .video-frame {
        width: min(100%, 390px);
        height: auto;

        aspect-ratio: 9 / 16;

        box-shadow:
            0
            12px
            28px
            rgba(29, 42, 30, 0.11),
            0
            2px
            6px
            rgba(29, 42, 30, 0.06);
    }

    .home-actions {
        order: 3;

        padding: 0;

        grid-template-columns: 1fr;

        gap: 5px;

        margin-top: 0;
    }

    .home-action {
        min-height: 67px;

        padding:
            10px
            15px;
    }

    .action-label {
        font-size: 8px;
    }

    .action-bottom strong {
        max-width: none;

        font-size: 16px;
    }

    .arrow .site-arrow {
        width: 24px;
    }

    .hero-after-actions {
        order: 4;

        padding:
            20px
            22px
            24px;

        background: #fbfaf6;

        border: 1px solid #e5e5dd;
    }

    .hero-after-actions p {
        max-width: none;

        font-size: 14px;

        line-height: 1.58;
    }


    /* RESTE MOBILE */

    .movement-section,
    .recap-section {
        padding:
            62px
            20px;
    }

    .movement-number {
        font-size: 57px;
    }

    .map-placeholder {
        min-height: 340px;

        margin-top: 24px;
    }

    .map-placeholder iframe {
        height: 340px;
    }

    .journey-section {
        width: calc(100% - 40px);

        padding: 62px 0;
    }

    .journey-intro {
        font-size: 15px;
    }

    .journey-legend {
        gap: 10px 16px;

        margin-bottom: 26px;
    }

    .journey-legend-item {
        font-size: 11px;
    }

    .region-summary {
        min-height: 70px;

        gap: 12px;
    }

    .region-name {
        gap: 11px;

        font-size: 17px;
    }

    .region-dot {
        width: 10px;
        height: 10px;

        flex-basis: 10px;
    }

    .region-arrow {
        margin-left: auto;

        font-size: 23px;
    }

    .department-list {
        padding:
            0
            0
            16px
            20px;
    }

    .department-heading {
        min-height: 54px;

        gap: 8px;
    }

    .department-code {
        min-width: 25px;

        font-size: 12px;
    }

    .department-name {
        font-size: 15px;
    }

    .department-route-label {
        display: none;
    }

    .department-stages {
        padding:
            0
            8px
            15px
            7px;

        gap: 8px;
    }

    .journey-stage {
        padding:
            14px
            15px
            15px;

        border-left-width: 3px;
    }

    .journey-stage-meta {
        font-size: 11px;
    }

    .journey-stage-city {
        font-size: 18px;
    }

    .journey-stage-department {
        font-size: 13px;
    }

    .journey-stage-type {
        font-size: 13px;
    }

    .recap-grid {
        grid-template-columns: 1fr;
    }

    .recap-image,
    .recap-video {
        min-height: 190px;
    }

    .support-section {
        padding:
            70px
            20px;
    }
}


/* ========================================
TRAJET — RESPONSIVE TABLETTE
======================================== */

@media (max-width: 900px) {

    .journey-title-row {
        align-items: flex-start;
        flex-direction: column;

        gap: 10px;
    }

    .journey-count {
        margin-bottom: 0;
    }

    .department-search {
        grid-template-columns: 1fr;

        gap: 12px;
    }

    .department-number-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }
}


/* ========================================
TRAJET — RESPONSIVE MOBILE
======================================== */

@media (max-width: 760px) {

    .journey-section {
        width: calc(100% - 40px);

        padding: 62px 0;
    }

    .journey-title-row {
        margin-bottom: 27px;
    }

    .journey-title-row h2 {
        margin-bottom: 14px;
    }

    .journey-intro {
        font-size: 15px;
    }

    .department-search {
        margin-left: -20px;
        margin-right: -20px;
        margin-bottom: 20px;

        padding: 22px 17px;

        gap: 20px;
    }

    .department-search-copy h3 {
        font-size: 28px;
    }

    .department-search-copy p {
        font-size: 14px;
    }

    .department-search-field {
        min-height: 54px;
    }

    .department-search-field input {
        font-size: 15px;
    }

    .journey-tabs {
        overflow-x: auto;

        scrollbar-width: none;
    }

    .journey-tabs::-webkit-scrollbar {
        display: none;
    }

    .journey-tab {
        flex: 0 0 auto;

        min-height: 50px;

        padding: 0 12px;

        font-size: 13px;

        white-space: nowrap;
    }

    .journey-tab::after {
        left: 12px;
        right: 12px;
    }

    .department-number-grid {
        grid-template-columns: 1fr;
    }

    .number-department {
        min-height: 62px;
    }
}


/* ========================================
DESKTOP
1200px → 1699px
======================================== */

@media (min-width: 1200px) and (max-width: 1699px) {

    .home-hero {
        width: min(
            1840px,
            calc(100% - 110px)
        );

        height: calc(100vh - 228px);

        min-height: 500px;

        padding:
            14px
            0
            18px;

        display: grid;

        grid-template-columns:
            minmax(340px, 0.78fr)
            minmax(0, 2.22fr);

        align-items: stretch;

        gap: 14px;
    }


    /* ========================================
    VIDÉO
    ======================================== */

    .video-wrapper {
        width: 100%;
        height: 100%;

        min-width: 0;
        min-height: 0;

        padding:
            10px
            12px;

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

    .video-frame {
        height: 100%;
        width: auto;

        max-width: 100%;
        max-height: 100%;

        aspect-ratio: 9 / 16;
    }


    /* ========================================
    CONTENU
    ======================================== */

    .hero-content {
        width: 100%;
        height: 100%;

        min-width: 0;

        display: flex;
        flex-direction: column;

        overflow: hidden;
    }


    /* ========================================
    TEXTE
    ======================================== */

    .hero-editorial {
        flex: 0 0 auto;

        padding:
            34px
            clamp(42px, 3.7vw, 66px)
            22px;
    }

    .hero-editorial-kicker {
        margin-bottom: 6px;

        font-size: 12px;
    }

    .hero-editorial h1 {
        width: 100%;
        max-width: 100%;

        margin-bottom: 20px;

        font-size:
            clamp(
                45px,
                3.8vw,
                68px
            );

        line-height: 0.95;

        letter-spacing: -2.8px;
    }

    .hero-editorial p {
        max-width: 760px;

        font-size:
            clamp(
                15px,
                1.02vw,
                18px
            );

        line-height: 1.55;
    }


    /* ========================================
    BOUTONS
    ======================================== */

    .home-actions {
        flex: 0 0 auto;

        width: 100%;

        padding:
            0
            clamp(42px, 3.7vw, 66px);

        display: grid;

        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );

        gap: 10px;
    }

    .home-action {
        min-width: 0;
        min-height: 105px;

        padding:
            18px
            22px;
    }

    .action-label {
        font-size: 10px;
    }

    .action-bottom strong {
        max-width: 190px;

        font-size: 19px;

        line-height: 1.08;
    }

    .arrow .site-arrow {
        width: 28px;
    }


    /* ========================================
    TEXTE SOUS LES ACTIONS
    ======================================== */

    .hero-after-actions {
        flex: 1;

        min-height: 0;

        padding:
            20px
            clamp(42px, 3.7vw, 66px)
            10px;

        display: flex;
        align-items: flex-start;
    }

    .hero-after-actions p {
        max-width: 880px;

        font-size: 15px;

        line-height: 1.62;
    }


    /* ========================================
    RESTE DU DESKTOP
    ======================================== */

    .movement-section h2,
    .journey-section h2,
    .recap-section h2,
    .support-section h2 {
        width: 100%;

        max-width: none;
    }

    .movement-section,
    .recap-section {
        padding-left:
            max(
                55px,
                calc((100vw - 1500px) / 2)
            );

        padding-right:
            max(
                55px,
                calc((100vw - 1500px) / 2)
            );
    }

    .journey-section {
        width: min(
            1500px,
            calc(100% - 110px)
        );
    }

    .map-placeholder {
        min-height: 520px;
    }

    .map-placeholder iframe {
        height: 520px;
    }

    .department-stages {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

    .journey-stage:only-child {
        grid-column: 1 / -1;

        max-width: calc(50% - 5px);
    }

    .recap-grid {
        gap: 24px;
    }

    .recap-image,
    .recap-video {
        min-height: 300px;
    }
}


/* ========================================
TRÈS GRAND ÉCRAN
1700px ET +
======================================== */

@media (min-width: 1700px) {

    .home-intro-inner {
        width: min(
            1880px,
            calc(100% - 150px)
        );
    }


    /* ========================================
    HERO
    ======================================== */

    .home-hero {
        width: min(
            1840px,
            calc(100% - 110px)
        );

        height: calc(100vh - 228px);

        min-height: 500px;

        padding:
            14px
            0
            18px;

        display: grid;

        grid-template-columns:
            minmax(365px, 0.76fr)
            minmax(0, 2.24fr);

        align-items: stretch;

        gap: 14px;
    }


    /* ========================================
    VIDÉO
    ======================================== */

    .video-wrapper {
        width: 100%;
        height: 100%;

        min-width: 0;
        min-height: 0;

        padding:
            10px
            12px;

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

    .video-frame {
        height: 100%;
        width: auto;

        max-width: 100%;
        max-height: 100%;

        aspect-ratio: 9 / 16;
    }


    /* ========================================
    CONTENU
    ======================================== */

    .hero-content {
        width: 100%;
        height: 100%;

        min-width: 0;

        display: flex;
        flex-direction: column;

        overflow: hidden;
    }


    /* ========================================
    TEXTE
    ======================================== */

    .hero-editorial {
        flex: 0 0 auto;

        padding:
            34px
            70px
            22px;
    }

    .hero-editorial-kicker {
        margin-bottom: 6px;

        font-size: 12px;
    }

    .hero-editorial h1 {
        width: 100%;
        max-width: 100%;

        margin-bottom: 20px;

        font-size:
            clamp(
                54px,
                3.55vw,
                71px
            );

        line-height: 0.95;

        letter-spacing: -3px;
    }

    .hero-editorial p {
        max-width: 800px;

        font-size: 17px;

        line-height: 1.55;
    }


    /* ========================================
    BOUTONS
    ======================================== */

    .home-actions {
        flex: 0 0 auto;

        width: 100%;

        padding:
            0
            70px;

        display: grid;

        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );

        gap: 10px;
    }

    .home-action {
        min-width: 0;
        min-height: 110px;

        padding:
            19px
            23px;
    }

    .action-label {
        font-size: 10px;
    }

    .action-bottom strong {
        max-width: 200px;

        font-size: 20px;

        line-height: 1.08;
    }

    .arrow .site-arrow {
        width: 29px;
    }


    /* ========================================
    TEXTE SOUS LES ACTIONS
    ======================================== */

    .hero-after-actions {
        flex: 1;

        min-height: 0;

        padding:
            22px
            70px
            10px;

        display: flex;
        align-items: flex-start;
    }

    .hero-after-actions p {
        max-width: 940px;

        font-size: 16px;

        line-height: 1.65;
    }


    /* ========================================
    RESTE DU GRAND ÉCRAN
    ======================================== */

    .movement-section h2,
    .journey-section h2,
    .recap-section h2,
    .support-section h2 {
        width: 100%;

        max-width: none;
    }

    .movement-section,
    .recap-section {
        padding-left:
            max(
                55px,
                calc((100vw - 1500px) / 2)
            );

        padding-right:
            max(
                55px,
                calc((100vw - 1500px) / 2)
            );
    }

    .journey-section {
        width: min(
            1500px,
            calc(100% - 110px)
        );
    }

    .map-placeholder {
        min-height: 520px;
    }

    .map-placeholder iframe {
        height: 520px;
    }

    .department-stages {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

    .journey-stage:only-child {
        grid-column: 1 / -1;

        max-width: calc(50% - 5px);
    }

    .recap-grid {
        gap: 24px;
    }

    .recap-image,
    .recap-video {
        min-height: 300px;
    }
}

/* =========================================================
   HERO — PROPOSITION FINALE ALIGNÉE AU VISUEL
   À conserver TOUT EN BAS du fichier.
   Cette couche reprend uniquement la zone hero concernée.
   ========================================================= */

.hero-content {
    --hero-title-font: "Nunito Sans", "Inter", Arial, sans-serif;
    --hero-kicker-font: "Nunito", "Nunito Sans", Arial, sans-serif;
    --hero-body-font: "Inter", "Segoe UI", Arial, sans-serif;
    --hero-card-radius: 12px;

    background: #fbfaf6;
    border: 1px solid #e4e5de;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset;
}

/* =========================================================
   TEXTE ÉDITORIAL
   ========================================================= */

.hero-editorial {
    min-width: 0;
    padding:
        34px
        clamp(30px, 2.9vw, 48px)
        24px !important;

    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.hero-editorial-kicker {
    display: inline-block;
    width: fit-content;

    margin: 0 0 6px !important;
    padding: 0 0 4px;

    color: #80522e;

    font-family: var(--hero-kicker-font) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 1 !important;

    letter-spacing: 0.03em !important;
    text-transform: uppercase !important;

    border-bottom: 2px solid rgba(242, 181, 97, 0.65);
}

.hero-editorial-kicker::after {
    content: none !important;
}

.hero-editorial h1 {
    width: 100%;
    max-width: none !important;

    margin: 0 0 24px !important;

    color: #20352a;

    font-family: var(--hero-title-font) !important;
    font-size: clamp(58px, 4.4vw, 82px) !important;
    font-weight: 900 !important;
    line-height: 0.9 !important;
    letter-spacing: -0.055em !important;

    text-wrap: balance;
    overflow-wrap: normal;
    word-break: normal;
}

.hero-editorial p {
    width: 100%;
    max-width: none !important;
    margin: 0;

    color: #58625c;

    font-family: var(--hero-body-font) !important;
    font-size: clamp(16px, 1.02vw, 18px) !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
    letter-spacing: -0.012em;
}

/* =========================================================
   ACTIONS
   ========================================================= */

.home-actions {
    width: 100%;
    padding: 0 clamp(30px, 2.9vw, 48px) !important;

    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 12px !important;
    margin-top: 0;
}

.home-action {
    position: relative;

    min-width: 0;
    min-height: 104px !important;

    padding: 17px 21px !important;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    border-radius: var(--hero-card-radius);
    text-decoration: none;

    font-family: var(--hero-kicker-font) !important;

    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        background-color 0.18s ease,
        border-color 0.18s ease !important;
}

.home-action::before {
    content: "";
    position: absolute;
    inset: 0;

    border-radius: inherit;
    pointer-events: none;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.action-label {
    font-family: var(--hero-kicker-font) !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    line-height: 1 !important;

    letter-spacing: 0.05em !important;
    text-transform: uppercase;

    opacity: 0.8;
}

.action-bottom {
    width: 100%;

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

    gap: 18px;
}

.action-bottom strong {
    min-width: 0;
    max-width: none !important;

    font-family: var(--hero-kicker-font) !important;
    font-size: clamp(18px, 1.12vw, 20px) !important;
    font-weight: 800 !important;
    line-height: 1.04 !important;
    letter-spacing: -0.018em !important;
}

.action-coral .action-bottom strong {
    white-space: nowrap;
}

.home-action .arrow {
    flex-shrink: 0;
    transition: transform 0.18s ease;
}

.home-action:not(.action-disabled):not(.action-light):hover .arrow {
    transform: translateX(5px);
}

/* ---------- Couleurs ---------- */

.action-coral,
.action-alert {
    background: linear-gradient(180deg, #e17069 0%, #dc6760 100%);
    color: #ffffff;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset;
}

.action-coral:hover,
.action-alert:hover {
    background: linear-gradient(180deg, #dc6760 0%, #d85f58 100%);
    transform: translateY(-2px);
    filter: none;
    box-shadow:
        0 10px 24px rgba(97, 53, 49, 0.11),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.action-green {
    background: linear-gradient(180deg, #7ac970 0%, #73c268 100%);
    color: #16391d;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.10) inset;
}

.action-green:hover {
    background: linear-gradient(180deg, #72c367 0%, #69bb60 100%);
    transform: translateY(-2px);
    filter: none;
    box-shadow:
        0 10px 24px rgba(46, 87, 44, 0.11),
        inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

/* Désactivé */
.home-action.action-disabled,
.home-action.action-light {
    background: #eceae5 !important;
    border: 1px solid #e3e0da !important;
    color: #8b9189 !important;
    box-shadow: none !important;
    transform: none !important;
}

.home-action.action-disabled::before,
.home-action.action-light::before {
    box-shadow: none;
}

.home-action.action-disabled .action-label,
.home-action.action-disabled strong,
.home-action.action-disabled .arrow,
.home-action.action-light .action-label,
.home-action.action-light strong,
.home-action.action-light .arrow {
    color: #8b9189 !important;
}

.home-action.action-disabled .action-coming-soon,
.home-action.action-light .action-coming-soon {
    top: 14px;
    right: 15px;

    padding: 4px 8px 3px;

    font-family: var(--hero-kicker-font) !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    letter-spacing: 0.035em !important;

    border-radius: 2px;
}

/* =========================================================
   TEXTE SOUS LES ACTIONS
   ========================================================= */

.hero-after-actions {
    flex: 1;
    min-height: 0;

    padding:
        20px
        clamp(30px, 2.9vw, 48px)
        24px !important;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.hero-after-actions p {
    width: 100%;
    max-width: none !important;
    margin: 0;

    color: #58615c;

    font-family: var(--hero-body-font) !important;
    font-size: clamp(14px, 0.86vw, 15.5px) !important;
    font-weight: 400 !important;
    line-height: 1.66 !important;
    letter-spacing: -0.008em;
}

/* =========================================================
   DESKTOP — STRUCTURE
   ========================================================= */

@media (min-width: 1200px) {
    .home-hero {
        width: min(1840px, calc(100% - 110px)) !important;
        height: calc(100vh - 228px);
        min-height: 500px;

        padding: 14px 0 18px;

        display: grid !important;
        grid-template-columns:
            minmax(300px, 0.62fr)
            minmax(0, 2.38fr) !important;

        align-items: stretch;
        gap: 12px !important;
    }

    .video-wrapper {
        width: 100%;
        height: 100%;
        min-width: 0;
        min-height: 0;
        padding: 10px 12px;
    }

    .video-frame {
        width: auto;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        aspect-ratio: 9 / 16;
    }

    .hero-content {
        width: 100%;
        height: 100%;

        display: flex;
        flex-direction: column;
    }
}

@media (min-width: 1200px) and (max-width: 1499px) {
    .hero-editorial {
        padding: 30px 32px 22px !important;
    }

    .hero-editorial-kicker {
        font-size: 11px !important;
        margin-bottom: 6px !important;
    }

    .hero-editorial h1 {
        font-size: clamp(54px, 4.1vw, 66px) !important;
        margin-bottom: 20px !important;
    }

    .hero-editorial p {
        font-size: 15.5px !important;
    }

    .home-actions {
        padding: 0 32px !important;
        gap: 10px !important;
    }

    .home-action {
        min-height: 96px !important;
        padding: 15px 18px !important;
    }

    .action-bottom strong {
        font-size: 17px !important;
    }

    .hero-after-actions {
        padding: 18px 32px 20px !important;
    }

    .hero-after-actions p {
        font-size: 14px !important;
    }
}

@media (min-width: 1500px) {
    .hero-editorial {
        padding: 34px clamp(36px, 2.75vw, 50px) 26px !important;
    }

    .hero-editorial h1 {
        font-size: clamp(66px, 3.9vw, 84px) !important;
    }

    .hero-editorial p {
        font-size: 17px !important;
    }

    .home-actions {
        padding: 0 clamp(36px, 2.75vw, 50px) !important;
    }

    .home-action {
        min-height: 108px !important;
    }

    .action-bottom strong {
        font-size: 19px !important;
    }

    .hero-after-actions {
        padding: 21px clamp(36px, 2.75vw, 50px) 24px !important;
    }

    .hero-after-actions p {
        font-size: 14.5px !important;
    }
}

/* =========================================================
   TABLETTE
   ========================================================= */

@media (min-width: 761px) and (max-width: 1199px) {
    .hero-editorial {
        padding: 30px 26px 24px !important;
    }

    .hero-editorial-kicker {
        font-size: 11px !important;
    }

    .hero-editorial h1 {
        font-size: clamp(46px, 6vw, 62px) !important;
        line-height: 0.92 !important;
    }

    .hero-editorial p {
        max-width: none !important;
        font-size: 16px !important;
    }

    .home-actions {
        padding: 0 26px !important;
        gap: 8px !important;
    }

    .home-action {
        min-height: 92px !important;
        padding: 14px 16px !important;
    }

    .action-label {
        font-size: 9px !important;
    }

    .action-bottom strong {
        font-size: 16px !important;
    }

    .action-coral .action-bottom strong {
        white-space: normal;
    }

    .hero-after-actions {
        padding: 18px 26px 22px !important;
    }

    .hero-after-actions p {
        font-size: 14px !important;
    }
}

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

@media (max-width: 760px) {
    .home-hero {
        width: calc(100% - 24px);

        padding: 10px 0 18px;

        display: flex;
        flex-direction: column;

        gap: 7px;
    }

    .hero-content {
        display: contents;
    }

    .hero-editorial {
        order: 1;

        padding: 26px 20px 24px !important;

        background: #fbfaf6;

        border: 1px solid #e4e5de;
        border-radius: 10px;
    }

    .hero-editorial-kicker {
        font-size: 10px !important;
        margin-bottom: 6px !important;
    }

    .hero-editorial h1 {
        font-size: clamp(38px, 11vw, 52px) !important;
        line-height: 0.93 !important;
        margin-bottom: 18px !important;
    }

    .hero-editorial p {
        max-width: none !important;
        font-size: 15px !important;
        line-height: 1.58 !important;
    }

    .video-wrapper {
        order: 2;
    }

    .home-actions {
        order: 3;

        padding: 0 !important;
        grid-template-columns: 1fr;

        gap: 6px !important;
    }

    .home-action {
        min-height: 70px !important;
        padding: 11px 15px !important;
        border-radius: 8px;
    }

    .action-label {
        font-size: 9px !important;
    }

    .action-bottom strong {
        font-size: 16.5px !important;
    }

    .action-coral .action-bottom strong {
        white-space: normal;
    }

    .hero-after-actions {
        order: 4;

        padding: 18px 20px 20px !important;

        background: #fbfaf6;

        border: 1px solid #e4e5de;
        border-radius: 10px;
    }

    .hero-after-actions p {
        max-width: none !important;
        font-size: 14px !important;
        line-height: 1.62 !important;
    }
}

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

@media (max-width: 420px) {
    .hero-editorial {
        padding-left: 17px !important;
        padding-right: 17px !important;
    }

    .hero-editorial h1 {
        font-size: clamp(35px, 10.8vw, 44px) !important;
    }

    .action-bottom strong {
        font-size: 16px !important;
    }

    .hero-after-actions {
        padding-left: 17px !important;
        padding-right: 17px !important;
    }
}

/* =========================================================
   HERO — CORRECTION RESPONSIVE HAUTEUR
   À conserver tout en bas de home.css
   ========================================================= */

/* ---------------------------------------------------------
   DESKTOP
   --------------------------------------------------------- */

@media (min-width: 1200px) {

    .home-hero {
        width: min(1840px, calc(100% - 110px)) !important;

        /* IMPORTANT :
           plus de hauteur forcée sur les écrans peu hauts */
        height: auto !important;
        min-height: 500px;

        padding: 14px 0 18px;

        display: grid !important;
        grid-template-columns:
            minmax(300px, 0.62fr)
            minmax(0, 2.38fr) !important;

        align-items: stretch;
        gap: 12px !important;
    }

    .video-wrapper {
        width: 100%;

        height: auto !important;
        min-width: 0;
        min-height: 0;

        padding: 10px 12px;

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

    .video-frame {
        width: min(100%, 420px) !important;
        height: auto !important;

        max-width: 100%;
        max-height: none !important;

        aspect-ratio: 9 / 16;
    }

    .hero-content {
        width: 100%;

        height: auto !important;
        min-width: 0;

        display: flex;
        flex-direction: column;

        overflow: visible !important;
    }

    .hero-after-actions {
        flex: 0 0 auto !important;

        min-height: 0;

        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }
}


/* ---------------------------------------------------------
   DESKTOP AVEC ASSEZ DE HAUTEUR
   On retrouve le hero calé sur le viewport seulement
   quand l'écran est réellement assez haut.
   --------------------------------------------------------- */

@media (min-width: 1200px) and (min-height: 800px) {

    .home-hero {
        height: calc(100vh - 228px) !important;
    }

    .video-wrapper {
        height: 100% !important;

        align-items: center;
    }

    .video-frame {
        width: auto !important;
        height: 100% !important;

        max-width: 100%;
        max-height: 100% !important;
    }

    .hero-content {
        height: 100% !important;
    }

    .hero-after-actions {
        flex: 1 1 auto !important;
    }
}


/* ---------------------------------------------------------
   DESKTOP INTERMÉDIAIRE : 1200 → 1499
   --------------------------------------------------------- */

@media (min-width: 1200px) and (max-width: 1499px) {

    .hero-editorial {
        padding: 30px 32px 22px !important;
    }

    .hero-editorial-kicker {
        margin-bottom: 6px !important;

        font-size: 11px !important;
    }

    .hero-editorial h1 {
        margin-bottom: 20px !important;

        font-size: clamp(54px, 4.1vw, 66px) !important;
    }

    .hero-editorial p {
        max-width: none !important;

        font-size: 15.5px !important;
    }

    .home-actions {
        padding: 0 32px !important;

        gap: 10px !important;
    }

    .home-action {
        min-height: 96px !important;

        padding: 15px 18px !important;
    }

    .action-bottom strong {
        font-size: 17px !important;
    }

    .hero-after-actions {
        padding: 18px 32px 22px !important;
    }

    .hero-after-actions p {
        width: 100%;
        max-width: none !important;

        font-size: 14px !important;
        line-height: 1.62 !important;
    }
}


/* ---------------------------------------------------------
   GRAND DESKTOP
   --------------------------------------------------------- */

@media (min-width: 1500px) {

    .hero-editorial {
        padding:
            34px
            clamp(36px, 2.75vw, 50px)
            26px !important;
    }

    .hero-editorial h1 {
        font-size: clamp(66px, 3.9vw, 84px) !important;
    }

    .hero-editorial p {
        max-width: none !important;

        font-size: 17px !important;
    }

    .home-actions {
        padding:
            0
            clamp(36px, 2.75vw, 50px) !important;
    }

    .home-action {
        min-height: 108px !important;
    }

    .action-bottom strong {
        font-size: 19px !important;
    }

    .hero-after-actions {
        padding:
            21px
            clamp(36px, 2.75vw, 50px)
            24px !important;
    }

    .hero-after-actions p {
        max-width: none !important;

        font-size: 14.5px !important;
    }
}


/* ---------------------------------------------------------
   TABLETTE
   --------------------------------------------------------- */

@media (min-width: 761px) and (max-width: 1199px) {

    .home-hero {
        height: auto !important;
    }

    .hero-content {
        height: auto !important;

        overflow: visible !important;
    }

    .hero-editorial {
        padding: 30px 26px 24px !important;
    }

    .hero-editorial-kicker {
        font-size: 11px !important;
    }

    .hero-editorial h1 {
        font-size: clamp(46px, 6vw, 62px) !important;
        line-height: 0.92 !important;
    }

    .hero-editorial p {
        max-width: none !important;

        font-size: 16px !important;
    }

    .home-actions {
        padding: 0 26px !important;

        gap: 8px !important;
    }

    .home-action {
        min-height: 92px !important;

        padding: 14px 16px !important;
    }

    .action-label {
        font-size: 9px !important;
    }

    .action-bottom strong {
        font-size: 16px !important;
    }

    .action-coral .action-bottom strong {
        white-space: normal;
    }

    .hero-after-actions {
        flex: 0 0 auto !important;

        padding: 18px 26px 22px !important;

        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .hero-after-actions p {
        max-width: none !important;

        font-size: 14px !important;
    }
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 760px) {

    .home-hero {
        width: calc(100% - 24px);

        height: auto !important;

        padding: 10px 0 18px;

        display: flex;
        flex-direction: column;

        gap: 7px;
    }

    .hero-content {
        height: auto !important;

        display: contents;

        overflow: visible !important;
    }

    .hero-editorial {
        order: 1;

        padding: 26px 20px 24px !important;

        background: #fbfaf6;

        border: 1px solid #e4e5de;
        border-radius: 10px;
    }

    .hero-editorial-kicker {
        margin-bottom: 6px !important;

        font-size: 10px !important;
    }

    .hero-editorial h1 {
        margin-bottom: 18px !important;

        font-size: clamp(38px, 11vw, 52px) !important;
        line-height: 0.93 !important;
    }

    .hero-editorial p {
        max-width: none !important;

        font-size: 15px !important;
        line-height: 1.58 !important;
    }

    .video-wrapper {
        order: 2;

        height: auto !important;
    }

    .video-frame {
        width: min(100%, 390px) !important;
        height: auto !important;

        max-height: none !important;

        aspect-ratio: 9 / 16;
    }

    .home-actions {
        order: 3;

        padding: 0 !important;

        grid-template-columns: 1fr;

        gap: 6px !important;
    }

    .home-action {
        min-height: 70px !important;

        padding: 11px 15px !important;

        border-radius: 8px;
    }

    .action-label {
        font-size: 9px !important;
    }

    .action-bottom strong {
        font-size: 16.5px !important;
    }

    .action-coral .action-bottom strong {
        white-space: normal;
    }

    .hero-after-actions {
        order: 4;

        flex: 0 0 auto !important;

        padding: 18px 20px 20px !important;

        display: flex;
        flex-direction: column;
        align-items: flex-start;

        background: #fbfaf6;

        border: 1px solid #e4e5de;
        border-radius: 10px;
    }

    .hero-after-actions p {
        max-width: none !important;

        font-size: 14px !important;
        line-height: 1.62 !important;
    }
}

/* ========================================
   MOBILE — LISTE DES DÉPARTEMENTS
   ======================================== */

@media (max-width: 600px) {

    /* Onglets équilibrés */
    .journey-tabs {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0;
        overflow: visible;
    }

    .journey-tab {
        min-width: 0;
        padding: 12px 5px;
        font-family: "Nunito Sans", sans-serif;
        font-size: 12px;
        font-weight: 800;
        line-height: 1.25;
        white-space: normal;
        text-align: center;
    }

    .journey-tab::after {
        left: 5px;
        right: 5px;
    }

    /* Liste par numéro de département */
    .department-number-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .number-department {
        display: grid;
        grid-template-columns: 50px minmax(0, 1fr);
        align-items: center;
        column-gap: 15px;
        min-height: 85px;
        padding: 12px 0;
    }

    /* Pastille du numéro */
    .number-department-code {
        grid-column: 1;
        grid-row: 1 / span 2;

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

        width: 50px;
        height: 38px;
        border-radius: 999px;

        background: #edf7e9;
        color: #315f2b;
        font-size: 17px;
        font-weight: 800;
    }

    .number-department-name {
        grid-column: 2;
        grid-row: 1;
        font-size: 15px;
        line-height: 1.3;
    }

    /* Position et date dans une zone flexible */
    .number-department-position {
        grid-column: 2;
        grid-row: 2;

        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 5px;

        margin-top: 5px;
        font-size: 11px;
        line-height: 1.35;
    }

    /* La date ne doit pas se couper */
    .number-department-date {
        display: inline-block;
        max-width: 100%;
        padding: 4px 10px;

        background: #edf7e9;
        border-radius: 999px;

        color: #315f2b;
        font-size: 11px;
        font-weight: 600;

        white-space: nowrap;
    }
}

.mobilisation-stats.mobilisation-stats--home {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    background: #fff;
    color: #344e41;
    border-bottom: 1px solid #eceeeb;
    font-family: 'Nunito', Arial, sans-serif;
    font-size: 12px;
}

.mobilisation-stats--home > span {
    flex: 1 1 240px;
    margin: 0;
    padding: clamp(4px, 0.5vw, 6px);
    line-height: 1.35;
    text-align: center;
}

.mobilisation-stats--home .counter--participants {
    background: #FFE0A0;
}

.mobilisation-stats--home .counter--aides {
    background: #A3DCE4;
}

.mobilisation-stats--home .counter--contributions {
    background: #BDA9E8;
}

.mobilisation-stats--home strong {
    font-weight: 800;
}

/* Couleurs des départements : même palette régionale que la carte. */
/* Bretagne */
.journey-section [data-department-code="22"],
.journey-section [data-department-code="29"],
.journey-section [data-department-code="35"],
.journey-section [data-department-code="56"] {
    --department-color: #9ED9E5;
}

/* Normandie */
.journey-section [data-department-code="14"],
.journey-section [data-department-code="27"],
.journey-section [data-department-code="50"],
.journey-section [data-department-code="61"],
.journey-section [data-department-code="76"] {
    --department-color: #F0C5B8;
}

/* Hauts-de-France */
.journey-section [data-department-code="02"],
.journey-section [data-department-code="59"],
.journey-section [data-department-code="60"],
.journey-section [data-department-code="62"],
.journey-section [data-department-code="80"] {
    --department-color: #B5B5B5;
}

/* Île-de-France */
.journey-section [data-department-code="75"],
.journey-section [data-department-code="77"],
.journey-section [data-department-code="78"],
.journey-section [data-department-code="91"],
.journey-section [data-department-code="92"],
.journey-section [data-department-code="93"],
.journey-section [data-department-code="94"],
.journey-section [data-department-code="95"] {
    --department-color: #C8EAF5;
}

/* Grand Est */
.journey-section [data-department-code="08"],
.journey-section [data-department-code="10"],
.journey-section [data-department-code="51"],
.journey-section [data-department-code="52"],
.journey-section [data-department-code="54"],
.journey-section [data-department-code="55"],
.journey-section [data-department-code="57"],
.journey-section [data-department-code="67"],
.journey-section [data-department-code="68"],
.journey-section [data-department-code="88"] {
    --department-color: #FFF59A;
}

/* Pays de la Loire */
.journey-section [data-department-code="44"],
.journey-section [data-department-code="49"],
.journey-section [data-department-code="53"],
.journey-section [data-department-code="72"],
.journey-section [data-department-code="85"] {
    --department-color: #E5B4D0;
}

/* Centre-Val de Loire */
.journey-section [data-department-code="18"],
.journey-section [data-department-code="28"],
.journey-section [data-department-code="36"],
.journey-section [data-department-code="37"],
.journey-section [data-department-code="41"],
.journey-section [data-department-code="45"] {
    --department-color: #DEC16E;
}

/* Bourgogne-Franche-Comté */
.journey-section [data-department-code="21"],
.journey-section [data-department-code="25"],
.journey-section [data-department-code="39"],
.journey-section [data-department-code="58"],
.journey-section [data-department-code="70"],
.journey-section [data-department-code="71"],
.journey-section [data-department-code="89"],
.journey-section [data-department-code="90"] {
    --department-color: #A9D19A;
}

/* Nouvelle-Aquitaine */
.journey-section [data-department-code="16"],
.journey-section [data-department-code="17"],
.journey-section [data-department-code="19"],
.journey-section [data-department-code="23"],
.journey-section [data-department-code="24"],
.journey-section [data-department-code="33"],
.journey-section [data-department-code="40"],
.journey-section [data-department-code="47"],
.journey-section [data-department-code="64"],
.journey-section [data-department-code="79"],
.journey-section [data-department-code="86"],
.journey-section [data-department-code="87"] {
    --department-color: #C6DC90;
}

/* Auvergne-Rhône-Alpes */
.journey-section [data-department-code="01"],
.journey-section [data-department-code="03"],
.journey-section [data-department-code="07"],
.journey-section [data-department-code="15"],
.journey-section [data-department-code="26"],
.journey-section [data-department-code="38"],
.journey-section [data-department-code="42"],
.journey-section [data-department-code="43"],
.journey-section [data-department-code="63"],
.journey-section [data-department-code="69"],
.journey-section [data-department-code="73"],
.journey-section [data-department-code="74"] {
    --department-color: #8BC3E6;
}

/* Occitanie */
.journey-section [data-department-code="09"],
.journey-section [data-department-code="11"],
.journey-section [data-department-code="12"],
.journey-section [data-department-code="30"],
.journey-section [data-department-code="31"],
.journey-section [data-department-code="32"],
.journey-section [data-department-code="34"],
.journey-section [data-department-code="46"],
.journey-section [data-department-code="48"],
.journey-section [data-department-code="65"],
.journey-section [data-department-code="66"],
.journey-section [data-department-code="81"],
.journey-section [data-department-code="82"] {
    --department-color: #F49B72;
}

/* Provence-Alpes-Côte d’Azur */
.journey-section [data-department-code="04"],
.journey-section [data-department-code="05"],
.journey-section [data-department-code="06"],
.journey-section [data-department-code="13"],
.journey-section [data-department-code="83"],
.journey-section [data-department-code="84"] {
    --department-color: #F8AD35;
}

/* Corse */
.journey-section [data-department-code="2A"],
.journey-section [data-department-code="2B"] {
    --department-color: #AADEC3;
}

.journey-section [data-department-position="24"],
.journey-section [data-department-position="25"],
.journey-section [data-department-position="26"],
.route-list .route-department[data-department-position="24"],
.route-list .route-department[data-department-position="25"],
.route-list .route-department[data-department-position="26"] {
    --department-color: #f5d852;
    --route-region: #f5d852;
}

.route-list .route-department::before,
.route-list .route-department::after,
.route-list .route-department.is-start::after,
.route-list .route-department.is-finish::after {
    background: #B8AAAA;
}

.journey-section [data-department-code] {
    --department-ink: #fffdf8;
}

.route-list .route-position,
.route-list .route-department-label,
.number-department .number-department-code {
    background: var(--department-color, #eee9e9);
    color: var(--department-ink, #34483a);
}

.route-list .route-department .route-marker-start {
    background: #edf3ee;
    border-color: #d8e3da;
    color: #54715d;
}

.route-list .route-department .route-marker-finish {
    background: #f3eef2;
    border-color: #e4dbe2;
    color: #80677a;
}

.number-department .number-department-date {
    background: #eee9e9;
    color: #625656;
}

.route-list .route-department.is-search-match,
.number-department.is-search-match {
    background: color-mix(in srgb, var(--department-color, #928484) 20%, white);
}
/* Accueil : panneau et cartes de la maquette, sous l'encart de présentation. */
.welcome-home-hero {
    box-sizing: border-box;
    width: min(1510px, calc(100% - clamp(26px, 4vw, 64px)));
    margin: 18px auto 60px;
    display: grid;
    grid-template-columns: minmax(200px, 0.24fr) minmax(0, 1fr);
    align-items: stretch;
    gap: 20px;
    font-family: 'DM Sans', Arial, sans-serif;
    color: #172331;
}
.welcome-home-hero *, .welcome-home-hero *::before, .welcome-home-hero *::after { box-sizing: border-box; }
.welcome-video-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 11px;
    background: #f7f5ee;
    border: 1px solid #e7e6e0;
    border-radius: 12px;
    min-width: 0;
}
.welcome-video-frame { width: 100%; max-width: 268px; }
.welcome-video-frame video { display: block; width: 100%; max-height: min(600px, 75svh); aspect-ratio: 9 / 16; object-fit: contain; background: #172331; border-radius: 3px; }
.welcome-hero-content { min-width: 0; padding: clamp(21px, 2.4vw, 36px); container-type: inline-size; background: #fffdfa; border: 1px solid #e8e5e0; border-radius: 15px; }
.welcome-hero-editorial-kicker { display: inline-block; margin-bottom: 18px; padding-bottom: 8px; border-bottom: 2px solid #ed6c73; color: #ed6c73; font-size: 14px; font-weight: 800; letter-spacing: .025em; }
.welcome-hero-editorial h1 { margin: 0 0 22px; font-family: 'DM Serif Display', Georgia, serif; font-size: clamp(1.5rem, 1rem + 1.5vw, 2.4375rem); font-size: clamp(1.5rem, 1rem + 2.5cqi, 2.4375rem); font-weight: 400; line-height: 1.25; letter-spacing: -.025em; color: #1d2a3a; text-wrap: balance; }
.welcome-hero-editorial p, .welcome-hero-after-actions p { margin: 0 0 24px; font-size: 15px; line-height: 1.6; color: #5c6670; }
.welcome-home-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: 12px; margin-bottom: 22px; }
.welcome-home-action { position: relative; min-width: 0; min-height: 138px; padding: 20px 18px; display: flex; flex-direction: column; justify-content: space-between; gap: 22px; border-radius: 12px; text-decoration: none; color: #172331; transition: transform .15s, filter .15s; }
.welcome-home-action:hover { transform: translateY(-3px); filter: saturate(1.08); color: #172331; }
.welcome-action-contribution { background: #ffe5ac; }
.welcome-action-coral { background: #afe4eb; }
.welcome-action-green { background: #d4bdf6; }
.welcome-action-label { min-height: 42px; padding-right: 64px; font-size: 11px; font-weight: 800; letter-spacing: .02em; }
.welcome-symbol { position: absolute; top: 0; right: 0; width: 80px; height: 80px; object-fit: contain; pointer-events: none; }
.welcome-action-bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; }
.welcome-action-bottom strong { min-width: 0; overflow-wrap: anywhere; font-size: clamp(1rem, .9rem + .3vw, 1.125rem); line-height: 1.3; font-weight: 800; letter-spacing: -.03em; }
.welcome-action-bottom .arrow { flex: 0 0 23px; display: flex; }
.welcome-action-bottom .arrow svg { width: 23px; height: 23px; }
.welcome-hero-after-actions p { margin-bottom: 20px; }
.welcome-home-hero .flyer-download { width: 100%; margin: 0; padding: 17px 21px; gap: 18px; border: 0; border-radius: 12px; background: #465c70; color: white; }
.welcome-home-hero .flyer-download:hover { background: #526f89; }
.welcome-home-hero .flyer-download__icon { width: 52px; height: 52px; flex-basis: 52px; background: #f5f8fb; color: #344e65; }
.welcome-home-hero .flyer-download__content { overflow-wrap: anywhere; }
.welcome-home-hero .flyer-download__content strong { color: white; font-size: 17px; }
.welcome-home-hero .flyer-download__content span { color: #e4edf5; font-size: 13px; }
.welcome-home-hero .flyer-download::after { content: '→'; margin-left: auto; font-size: 26px; }
.welcome-home-action:focus-visible, .welcome-home-hero .flyer-download:focus-visible { outline: 3px solid #293a49; outline-offset: 4px; }
@media (max-width: 1050px) {
    .welcome-home-hero { grid-template-columns: 230px minmax(0, 1fr); }
    .welcome-hero-content { padding: 25px 22px; }
    .welcome-home-action { padding: 20px 14px; }
}
@media (max-width: 760px) {
    .welcome-home-hero { width: calc(100% - 26px); grid-template-columns: minmax(0, 1fr); }
    .welcome-video-wrapper { width: min(100%, 270px); justify-self: center; }
    .welcome-video-frame video { max-height: min(360px, 65svh); }
    .welcome-hero-content { padding: 21px 15px; }
    .welcome-home-actions { grid-template-columns: minmax(0, 1fr); gap: 9px; }
    .welcome-home-action { min-height: 120px; gap: 16px; }
    .welcome-home-hero .flyer-download { padding: 13px; gap: 12px; }
    .welcome-home-hero .flyer-download__content strong { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
    .welcome-home-action, .welcome-home-hero .flyer-download { transition: none; }
    .welcome-home-action:hover, .welcome-home-hero .flyer-download:hover { transform: none; }
}

/* La ligne entière mène à la page de l'étape. */
.journey-section a.route-department,
.journey-section a.number-department {
    color: inherit;
    text-decoration: none;
}
.journey-section a.route-department:hover,
.journey-section a.number-department:hover {
    background: color-mix(in srgb, var(--department-color, #928484) 20%, white);
}
.journey-section a.route-department:focus-visible,
.journey-section a.number-department:focus-visible {
    outline: 3px solid #465c70;
    outline-offset: 3px;
}

.welcome-home-hero .flyer-download__icon img { display: block; width: 72px; height: 72px; max-width: none; object-fit: contain; }