/* ========================================
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
======================================== */

.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%
        );
}


/* ========================================
ARROW
======================================== */

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

    gap: 30px;

    min-height: 56px;

    padding: 0 20px;

    background: #76c56b;
    color: #fff;

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

    text-decoration: none;

    transition: filter .15s ease;
}

.journey-suggestion-button:hover {
    color: #fff;
    filter: brightness(.95);
}

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

    flex-shrink: 0;

    color: currentColor;
}

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

    display: block;
}


/* ========================================
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: 18px;

    color: var(--green-dark);

    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: 12px;

    color: var(--green-dark);

    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)
        );

    background: var(--green-soft);
}

.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 {
    margin-bottom: 34px;

    padding: 28px 30px;

    display: grid;

    grid-template-columns:
        minmax(0, 0.85fr)
        minmax(340px, 1.15fr);

    gap: 42px;

    background:
        linear-gradient(
            110deg,
            #f1f8ee 0%,
            #f7fbf5 100%
        );

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

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

.department-search-kicker {
    display: block;

    margin-bottom: 8px;

    color: var(--route-green-dark);

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

    letter-spacing: 1.35px;

    text-transform: uppercase;
}

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

    color: #223528;

    font-size: clamp(22px, 2.2vw, 31px);

    line-height: 1.06;

    letter-spacing: -0.6px;
}

.department-search-copy p {
    max-width: 520px;

    margin: 0;

    color: #6b716a;

    font-size: 14px;

    line-height: 1.5;
}

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

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

    padding: 0 17px;

    display: flex;
    align-items: center;

    gap: 12px;

    background: #ffffff;

    border: 1px solid #cbd8c7;

    box-shadow:
        0
        8px
        24px
        rgba(52, 79, 49, 0.055);
}

.department-search-field:focus-within {
    border-color: #84b978;

    box-shadow:
        0
        0
        0
        3px
        rgba(114, 189, 85, 0.12);
}

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

    flex: 0 0 20px;

    fill: none;

    stroke: #668060;
    stroke-width: 1.7;
    stroke-linecap: round;
}

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

    padding: 0;

    border: 0;
    outline: 0;

    background: transparent;

    color: #263029;

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

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

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

    margin-top: 10px;

    padding: 0 2px;

    display: flex;
    align-items: center;

    gap: 10px;

    color: #70766f;

    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 var(--route-green);
}

.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: #e5f3df;

    color: #417438;

    font-size: 14px;
    font-weight: 900;
}

.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: #2d3c30;

    font-size: 13px;
}

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

    color: #737a72;

    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: inherit;
    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
======================================== */

.route-list {
    display: grid;

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

    column-gap: 46px;
}

.route-department {
    position: relative;

    min-height: 58px;

    display: grid;

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

    align-items: center;

    gap: 10px;

    border-bottom: 1px solid #e8ece6;

    transition:
        background 0.16s ease,
        padding 0.16s ease;
}

.route-position {
    color: #adb2ac;

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

    letter-spacing: 0.8px;
}

.route-code {
    color: var(--route-green-dark);

    font-size: 14px;
    font-weight: 900;
}

.route-name {
    min-width: 0;

    color: #343b35;

    font-size: 16px;
    font-weight: 760;
}

.route-marker {
    justify-self: end;

    padding: 5px 8px;

    border-radius: 999px;

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

    letter-spacing: 0.8px;

    text-transform: uppercase;
}

.route-marker-start {
    background: #eaf5e6;

    color: #4d853f;
}

.route-marker-finish {
    background: #fff0ea;

    color: #bd6158;
}

.route-department.is-start .route-name {
    color: #27542f;
}

.route-department.is-finish .route-name {
    color: #75413d;
}

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

.route-department.is-search-match {
    padding-left: 10px;
    padding-right: 10px;
}


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

.department-number-grid {
    display: grid;

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

    gap: 0 30px;
}

.number-department {
    min-height: 68px;

    display: grid;

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

    align-content: center;

    column-gap: 11px;

    border-bottom: 1px solid #e8ece6;

    transition: background 0.16s ease;
}

.number-department-code {
    grid-row: 1 / span 2;

    align-self: center;

    color: var(--route-green-dark);

    font-size: 18px;
    font-weight: 900;
}

.number-department-name {
    align-self: end;

    color: #343b35;

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

.number-department-position {
    align-self: start;

    margin-top: 3px;

    color: #949a93;

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

.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: #76c56b;

    color: #173d1e;

    font-weight: 900;

    text-decoration: none;
}

/* ========================================
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: 14px;

        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: 22px;
    }

    .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: 27px;

        padding: 24px 20px;

        gap: 20px;
    }

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

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

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

    .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;
    }

    .route-list {
        grid-template-columns: 1fr;
    }

    .route-department {
        min-height: 56px;

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

        gap: 7px;
    }

    .route-position {
        font-size: 10px;
    }

    .route-code {
        font-size: 13px;
    }

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

    .route-marker {
        padding: 4px 6px;

        font-size: 8px;
    }

    .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: 18px;

        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: 18px;

        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 18px !important;
    padding: 0 0 8px;

    color: #2f7c43;

    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(95, 175, 103, 0.55);
}

.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;
    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: 16px !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: 14px !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;
    }
}