/* ============================================================
   Page Station — CSS dédié
   v1 MVP : 8 sections (hero, correspondances, intro, adjacent,
   history, FAQ, tips, ads)
   ============================================================ */

/* --- Variables fallback (si pas dans bundle.css) --- */
.station-page {
    --station-spacing: 2rem;
    --station-radius: 12px;
    /* Le breadcrumb porte deja padding 1rem 0 (cf bundle.css) : on ne rajoute
       plus de padding-top ici pour garder un bloc hero compact. */
    padding-top: 0;
}

/* --- Scroll-margin-top pour les ancres quick-links (#trafic, #sorties, etc.)
   Le header global est sticky avec min-height 72px (+ border) ; on offset les
   cibles d'ancre pour que le titre h2 ne soit pas masque sous le header. --- */
.station-section,
.station-page .trafic-banner,
.station-page .trafic-block {
    scroll-margin-top: 100px;
}
@media (max-width: 767px) {
    .station-section,
    .station-page .trafic-banner,
    .station-page .trafic-block {
        scroll-margin-top: 90px;
    }
}

/* ============================================================
   1. HERO
   ============================================================ */
.station-hero {
    position: relative;
    /* Hero compact : 0.5rem mobile / 0.75rem desktop avant les raccourcis
       (quick-links ajoute deja 0.5rem de padding-top). */
    margin-bottom: 0.5rem;
}
@media (min-width: 768px) {
    .station-hero {
        margin-bottom: 0.75rem;
    }
}

.station-hero__image {
    width: 100%;
    overflow: hidden;
    position: relative;
    border-radius: var(--station-radius, 12px);
    /* Mobile : aspect-ratio 16:9, max-height 240px (compact) */
    aspect-ratio: 16 / 9;
    max-height: 240px;
    /* Espace blanc avec le bloc info qui suit (bg page bleed) */
    margin-bottom: 1rem;
}
@media (min-width: 768px) {
    .station-hero__image {
        /* Desktop : aspect-ratio 3:1 (panoramique), max-height 400px
           pour que H1 + raccourcis restent above the fold */
        aspect-ratio: 3 / 1;
        max-height: 400px;
        margin-bottom: 1.5rem;
    }
}
.station-hero__image picture,
.station-hero__image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center 60%; /* legerement vers le bas, sujet souvent en bas pour edicules */
}
.station-hero__image picture img {
    /* Quand <picture> entoure <img>, on n'applique pas object-fit deux fois */
    object-fit: inherit;
    object-position: inherit;
}

.station-hero__placeholder {
    width: 100%;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-primary, #0F6E56), var(--color-primary-dark, #085041));
    color: #FFFFFF;
    border-radius: var(--station-radius);
}
@media (min-width: 768px) {
    .station-hero__placeholder {
        height: 200px;
    }
}
.station-hero__placeholder-icon {
    font-size: 2.5rem;
    opacity: 0.5;
}

.station-hero__content {
    padding: 2rem 1.5rem;
    background: var(--color-bg-light, #F4F8F6);
    border-radius: var(--station-radius);
}

.station-hero__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.station-line-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    transition: transform 0.15s ease;
}
.station-line-badge:hover {
    transform: scale(1.1);
}

.station-hero h1 {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    margin: 0 0 0.5rem 0;
    line-height: 1.2;
    color: var(--color-text, #0F1E1A);
}

.station-hero__tagline {
    font-size: 1.125rem;
    color: var(--color-primary, #0F6E56);
    font-weight: 500;
    margin: 0 0 1rem 0;
}

.station-hero__description {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--color-text, #0F1E1A);
    margin: 0 0 1rem 0;
}

.station-hero__address {
    color: var(--color-text-muted, #5A6B66);
    font-size: 0.9rem;
    margin: 0;
}

/* ============================================================
   Sections génériques
   ============================================================ */
.station-section {
    margin-bottom: 1.5rem;
    padding: 1rem 0 0;
}

.station-section h2 {
    font-size: clamp(1.5rem, 3vw, 2rem);
    margin: 0 0 1rem 0;
    color: var(--color-text, #0F1E1A);
}

.station-section h3 {
    font-size: 1.125rem;
    margin: 1.5rem 0 0.75rem 0;
    color: var(--color-text, #0F1E1A);
}

.section-intro {
    font-size: 1rem;
    color: var(--color-text-muted, #5A6B66);
    margin: 0 0 1.5rem 0;
}

/* ============================================================
   2. CORRESPONDANCES
   ============================================================ */
.correspondances-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}
@media (min-width: 768px) {
    .correspondances-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.correspondances-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Container visuel d'une ligne dans la section Correspondances.
   Plus un <a> depuis le fix du scope du lien : le lien cliquable est
   maintenant uniquement sur le nom de ligne (.correspondance-line-name)
   pour ne pas inclure les terminus en dessous. */
.correspondance-line-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border-radius: 8px;
    color: var(--color-text, #0F1E1A);
    background: var(--color-bg-light, #F4F8F6);
}
.correspondance-line-link--inactive {
    opacity: 0.7;
}

/* Wrapper du contenu textuel (nom + terminus + walking RER) en column */
.correspondance-line-content {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    flex: 1 1 auto;
    min-width: 0;
}

/* Lien cliquable sur le nom de ligne UNIQUEMENT (pas sur les terminus) */
a.correspondance-line-name {
    color: var(--color-text, #1A2B26);
    text-decoration: none;
    transition: color 0.15s ease, text-decoration-color 0.15s ease;
    display: inline;
    align-self: flex-start; /* le link n'occupe que la largeur de son texte */
}
a.correspondance-line-name:hover,
a.correspondance-line-name:focus-visible {
    color: var(--color-primary, #0F6E56);
    text-decoration: underline;
    text-underline-offset: 2px;
}
a.correspondance-line-name:focus-visible {
    outline: 2px solid var(--color-primary, #0F6E56);
    outline-offset: 2px;
    border-radius: 2px;
}

.correspondance-line-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    font-weight: 700;
    font-size: 0.875rem;
    flex-shrink: 0;
}
.correspondance-line-badge--rer {
    width: auto;
    padding: 0 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
}

.correspondance-line-name {
    font-size: 0.95rem;
    display: inline-block;
}
.correspondance-line-walking {
    font-size: 0.8rem;
    /* #3D4A47 sur fond card #F4F8F6 = 7.4:1 (AAA) — plus lisible que --text-muted (5:1) */
    color: #3D4A47;
}

/* Terminus de ligne sous le nom (ex. "Ligne 1 du metro" / "↔ La Defense ⇄ Chateau de Vincennes")
   #3D4A47 sur fond card #F4F8F6 = 7.4:1 (AAA), plus lisible que --text-muted (5:1) */
.correspondance-line-terminus {
    display: block;
    font-size: 0.8rem;
    color: #3D4A47;
    margin-top: 0.15rem;
    line-height: 1.4;
    font-weight: 400;
    word-break: break-word;
}
.correspondance-line-terminus > span[aria-hidden="true"] {
    color: var(--color-primary, #0F6E56);
    margin: 0 0.15rem;
    font-weight: 500;
}

/* Variante hierarchique : RER multi-branches, 1 ligne par direction
   ("Vers l'ouest : ..." / "Vers l'est : ...") */
.correspondance-line-terminus--multi {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    margin-top: 0.25rem;
}
.correspondance-line-terminus__direction {
    display: block;
    line-height: 1.4;
}
.correspondance-line-terminus__label {
    color: var(--color-primary-darker, #04342C);
    font-weight: 600;
    margin-right: 0.25rem;
}
.correspondance-line-terminus__list {
    /* #3D4A47 sur fond card #F4F8F6 = 7.4:1 (AAA) */
    color: #3D4A47;
}

/* ============================================================
   3. INTRO SEO
   ============================================================ */
.section-intro-seo p {
    font-size: 1.0625rem;
    line-height: 1.7;
    margin: 0 0 1rem 0;
}

/* ============================================================
   4. STATIONS ADJACENTES
   ============================================================ */
.adjacent-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}
@media (min-width: 768px) {
    .adjacent-grid {
        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    }
}

.adjacent-line-block {
    background: var(--color-bg-light, #F4F8F6);
    border-radius: 8px;
    padding: 1.25rem;
}

.adjacent-line-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 1rem 0 !important;
    font-size: 1rem !important;
}

.adjacent-line-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    font-weight: 700;
    font-size: 0.875rem;
}

.adjacent-stations {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.adjacent-station {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    background: #FFFFFF;
    border-radius: 6px;
    border: 1px solid var(--color-border, #E0E6E4);
}

.adjacent-station--prev {
    flex-direction: row;
}
.adjacent-station--next {
    flex-direction: row-reverse;
}
.adjacent-station > div {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.adjacent-station-arrow {
    font-size: 1.25rem;
    color: var(--color-primary, #0F6E56);
}

/* Nom de la station adjacente : info principale, en gros gras et couleur normale */
.adjacent-station-name {
    display: block;
    font-weight: 600;
    font-size: 1rem;
    color: var(--color-text, #1A2B26);
    text-decoration: none;
    line-height: 1.3;
}
a.adjacent-station-name {
    transition: color 0.15s ease, text-decoration-color 0.15s ease;
}
a.adjacent-station-name:hover,
a.adjacent-station-name:focus-visible {
    color: var(--color-primary, #0F6E56);
    text-decoration: underline;
    text-underline-offset: 2px;
}
a.adjacent-station-name:focus-visible {
    outline: 2px solid var(--color-primary, #0F6E56);
    outline-offset: 2px;
    border-radius: 2px;
}
/* Variante inactive (page station pas encore creee) : pas de hover, juste gris */
.adjacent-station-name--inactive {
    color: var(--color-text, #1A2B26);
    cursor: default;
}

/* Direction : info secondaire, en plus petit et color-text-muted (sous le nom) */
.adjacent-station-direction {
    display: block;
    font-size: 0.8rem;
    color: var(--color-text-muted, #5A6B66);
    margin-top: 0.15rem;
    line-height: 1.35;
    font-weight: 400;
    /* Plus de text-transform/letter-spacing : convention web moderne (RATP,
       SNCF, Citymapper) → texte normal en sous-titre. */
}

/* ============================================================
   5. HISTORY
   ============================================================ */
.section-history p {
    font-size: 1rem;
    line-height: 1.7;
    margin: 0 0 1rem 0;
    color: var(--color-text, #0F1E1A);
}

/* ============================================================
   6. FAQ
   ============================================================ */
.faq-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.faq-item {
    background: var(--color-bg-light, #F4F8F6);
    border-radius: 8px;
    overflow: hidden;
}
.faq-item[open] {
    background: #FFFFFF;
    border: 1px solid var(--color-border, #E0E6E4);
}

.faq-question {
    padding: 1rem 1.25rem;
    cursor: pointer;
    font-weight: 600;
    color: var(--color-text, #0F1E1A);
    list-style: none;
    position: relative;
}
.faq-question::-webkit-details-marker {
    display: none;
}
.faq-question::after {
    content: '+';
    position: absolute;
    right: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.25rem;
    color: var(--color-primary, #0F6E56);
    transition: transform 0.2s ease;
}
.faq-item[open] .faq-question::after {
    content: '−';
}

.faq-answer {
    padding: 0 1.25rem 1.25rem;
}
.faq-answer p {
    margin: 0;
    color: var(--color-text, #0F1E1A);
    line-height: 1.6;
}

/* ============================================================
   7. CONSEILS PRATIQUES
   ============================================================ */
.tips-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.tips-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    background: var(--color-bg-light, #F4F8F6);
    border-left: 3px solid var(--color-primary, #0F6E56);
    border-radius: 4px;
}

.tips-icon {
    font-size: 1.125rem;
    flex-shrink: 0;
}
/* ============================================================
   8. HORAIRES PAR LIGNE (responsive cards ↔ table)
   ============================================================ */

.section-horaires {
    margin-top: 2.5rem;
}

/* Wrapper note bas */
.horaires-note {
    margin-top: 1rem;
    color: var(--color-text-muted, #5A6B66);
    font-style: italic;
}

/* Badge "PROLONGÉ" — partagé cards + table */
.badge-extended {
    display: inline-block;
    background: #FFE066;
    color: #6B4F00;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    letter-spacing: 0.5px;
    margin-left: 0.4rem;
    vertical-align: middle;
    text-transform: uppercase;
}

/* Helper visuellement caché mais lisible par lecteurs d'écran */
.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ----------- Affichage MOBILE : cartes empilées ----------- */
.horaires-cards {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.horaires-table-wrapper {
    display: none;
}

.horaires-card {
    background: #FFFFFF;
    border: 1px solid var(--color-border, #E0E6E4);
    border-radius: 10px;
    padding: 1rem 1.25rem;
}

.horaires-card__header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--color-border, #E0E6E4);
}

.horaires-card__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    flex-shrink: 0;
    transition: transform 0.15s ease;
}
a.horaires-card__badge:hover {
    transform: scale(1.08);
}

.horaires-card__line-label {
    font-weight: 600;
    color: var(--color-text, #0F1E1A);
}

.horaires-card__list {
    margin: 0;
    padding: 0;
}

.horaires-card__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: 0.4rem 0;
    border-bottom: 1px dashed rgba(0, 0, 0, 0.06);
}
.horaires-card__row:last-child {
    border-bottom: none;
}

.horaires-card__row dt {
    color: var(--color-text-muted, #5A6B66);
    font-size: 0.9rem;
    margin: 0;
}

.horaires-card__row dd {
    margin: 0;
    font-weight: 600;
    color: var(--color-text, #0F1E1A);
    font-size: 1rem;
    text-align: right;
}

.horaires-card__row--extended dd {
    color: #B8860B;
}

/* ----------- Affichage DESKTOP : tableau comparatif ----------- */
@media (min-width: 768px) {

    .horaires-cards {
        display: none;
    }

    .horaires-table-wrapper {
        display: block;
        overflow-x: auto;
        border-radius: 10px;
        border: 1px solid var(--color-border, #E0E6E4);
    }

    .horaires-table {
        width: 100%;
        border-collapse: collapse;
        background: #FFFFFF;
        font-size: 0.95rem;
    }

    .horaires-table thead {
        background: var(--color-bg-light, #F4F8F6);
    }

    .horaires-table th,
    .horaires-table td {
        padding: 0.85rem 1rem;
        text-align: left;
        border-bottom: 1px solid var(--color-border, #E0E6E4);
        vertical-align: middle;
    }

    .horaires-table thead th {
        font-weight: 600;
        font-size: 0.85rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: var(--color-text-muted, #5A6B66);
    }

    .horaires-table tbody tr:last-child th,
    .horaires-table tbody tr:last-child td {
        border-bottom: none;
    }

    .horaires-table tbody tr:hover {
        background: var(--color-bg-light, #F4F8F6);
    }

    .horaires-table__line-cell {
        width: 80px;
        text-align: center !important;
        vertical-align: middle;
    }

    .horaires-table__badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2.25rem;
        height: 2.25rem;
        min-width: 2.25rem;
        border-radius: 50%;
        font-weight: 700;
        font-size: 1rem;
        line-height: 1;
        text-decoration: none;
        flex-shrink: 0;
        box-sizing: border-box;
        transition: transform 0.15s ease;
    }
    a.horaires-table__badge:hover {
        transform: scale(1.1);
    }

    .horaires-table .text-muted {
        color: var(--color-text-muted, #5A6B66);
    }
}

/* ============================================================
   9. SORTIES (acces de la station, donnees IDFM/GTFS)
   ============================================================ */

.section-sorties {
    margin-top: 2.5rem;
}

/* Bloc secteur (regroupement par signaletique RATP) */
.sorties-sector {
    margin-bottom: 2rem;
}
@media (min-width: 768px) {
    .sorties-sector {
        margin-bottom: 2.5rem;
    }
}
.sorties-sector:last-child {
    margin-bottom: 0;
}

.sorties-sector__title {
    color: var(--color-primary, #0F6E56);
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0 0 0.4rem 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
}
@media (min-width: 768px) {
    .sorties-sector__title {
        font-size: 1.25rem;
    }
}

.sorties-sector__range {
    font-size: 0.85em;
    font-weight: 500;
    color: var(--color-text-muted, #5A6B66);
    letter-spacing: 0.01em;
}

.sorties-sector__desc {
    font-style: italic;
    color: var(--color-text-muted, #5A6B66);
    margin: 0 0 1.25rem 0;
    line-height: 1.55;
    font-size: 0.95rem;
}

/* Variante "Autres sorties" : titre plus neutre pour distinguer du regroupement officiel */
.sorties-sector--other .sorties-sector__title {
    color: var(--color-text-muted, #5A6B66);
}

.sorties-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}
@media (min-width: 640px) {
    .sorties-list {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
}
@media (min-width: 1024px) {
    .sorties-list {
        grid-template-columns: repeat(3, 1fr);
    }
}

.sortie-item {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    padding: 0.75rem 1rem;
    background: #FFFFFF;
    border: 1px solid var(--color-border, #E0E6E4);
    border-radius: 10px;
    transition: border-color var(--transition-base, 0.2s ease),
                box-shadow var(--transition-base, 0.2s ease);
}
@media (min-width: 1024px) {
    .sortie-item {
        padding: 0.875rem 1.125rem;
    }
}
.sortie-item:hover {
    border-color: var(--color-primary, #0F6E56);
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.04));
}

.sortie-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    min-width: 2.5rem;
    border-radius: 50%;
    background: var(--color-primary, #0F6E56);
    color: var(--color-primary-fg, #FFFFFF);
    font-weight: 700;
    font-size: 1rem;
    line-height: 1;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
    /* Aligne legerement avec la 1ere ligne du contenu */
    margin-top: 0.0625rem;
}

.sortie-content {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.sortie-content__main {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.sortie-name {
    color: var(--color-text, #1A2B26);
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.35;
    word-break: break-word;
}

.sortie-address {
    display: block;
    color: var(--color-text-muted, #5A6B66);
    font-size: 0.8125rem; /* 13px */
    line-height: 1.4;
    word-break: break-word;
}
@media (min-width: 1024px) {
    .sortie-address {
        font-size: 0.85rem;
        margin-top: 0.1rem;
    }
}

/* Badge PMR coherent avec .badge-extended (ratio + visuel) */
.badge-pmr {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: var(--color-success-bg, #E1F5EE);
    color: var(--color-success, #1D9E75);
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.2rem 0.5rem;
    border-radius: var(--radius-sm, 4px);
    letter-spacing: 0.3px;
    text-transform: uppercase;
    white-space: nowrap;
}

/* ============================================================
   11. POI A PROXIMITE (Wikidata + Wikipedia + Commons)
   ============================================================ */

.section-poi {
    margin-top: 2.5rem;
}

.poi-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}
@media (min-width: 640px) {
    .poi-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
}
@media (min-width: 1024px) {
    .poi-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.poi-card {
    display: flex;
    flex-direction: column;
    background: #FFFFFF;
    border: 1px solid var(--color-border, #E0E6E4);
    border-radius: var(--radius-lg, 12px);
    overflow: hidden;
    transition: transform var(--transition-base, 0.2s ease),
                box-shadow var(--transition-base, 0.2s ease),
                border-color var(--transition-base, 0.2s ease);
}
.poi-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md, 0 2px 8px rgba(0, 0, 0, 0.06));
    border-color: var(--color-primary, #0F6E56);
}

.poi-card--featured {
    border-color: var(--color-primary, #0F6E56);
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.04));
}

.poi-image {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--color-bg-tertiary, #F1F3F2);
}
.poi-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.poi-image--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
}
.poi-image__icon {
    font-size: 2.5rem;
    opacity: 0.4;
}

.poi-content {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    flex: 1 1 auto;
}

.poi-category {
    display: inline-block;
    align-self: flex-start;
    background: var(--color-primary-bg, #E1F5EE);
    color: var(--color-primary-darker, #04342C);
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.2rem 0.6rem;
    border-radius: var(--radius-sm, 4px);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.poi-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-text, #1A2B26);
    margin: 0;
    line-height: 1.3;
}

.poi-description {
    font-size: 0.9rem;
    color: var(--color-text-muted, #5A6B66);
    line-height: 1.5;
    margin: 0;
    /* S'etire pour combler la hauteur restante : pousse le bloc .poi-exit
       en bas pour aligner les "Sortie X · Y min" sur la meme ligne entre
       cartes voisines (.poi-content est deja flex column / flex 1). */
    flex: 1 1 auto;
}

.poi-exit {
    background: var(--color-bg-alt, #F7F9F8);
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-md, 8px);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--color-text, #1A2B26);
    line-height: 1.4;
    /* Garantit l'alignement en bas meme si .poi-description est absente
       (graceful : POI sans extract Wikipedia, fallback sur description Wikidata). */
    margin-top: auto;
}
.poi-exit__icon {
    color: var(--color-primary, #0F6E56);
    font-weight: 700;
    margin-right: 0.25rem;
}
.poi-exit__walk {
    font-weight: 700;
    color: var(--color-primary-darker, #04342C);
}
.poi-exit__dist {
    color: var(--color-text-muted, #5A6B66);
    font-weight: 400;
}

.poi-link {
    color: var(--color-primary, #0F6E56);
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    align-self: flex-start;
    margin-top: auto; /* push au bas de la carte si description courte */
    padding-top: 0.25rem;
}
.poi-link:hover,
.poi-link:focus {
    text-decoration: underline;
}

.poi-note {
    margin-top: 1.5rem;
    color: var(--color-text-muted, #5A6B66);
    font-style: italic;
}
.poi-note a {
    color: inherit;
    text-decoration: underline;
}

/* ============================================================
   12. TRAFIC TEMPS REEL (donnees IDFM PRIM, cache 5 min)
   ============================================================ */

/* --- Cas 1 : bandeau "trafic normal" mince et discret --- */
.trafic-banner {
    border-radius: var(--radius-md, 8px);
    margin-bottom: 1.5rem;
    padding: 0.65rem 1rem;
    font-size: 0.9rem;
    line-height: 1.4;
}
.trafic-banner.trafic--normal {
    background: var(--color-success-bg, #E1F5EE);
    color: var(--color-success, #1D9E75);
    border: 1px solid var(--color-success, #1D9E75);
    border-left-width: 4px;
}
.trafic-banner__inner {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}
.trafic-banner__icon {
    font-weight: 700;
    font-size: 1rem;
    flex-shrink: 0;
}
.trafic-banner__message {
    flex: 1 1 auto;
    color: var(--color-text, #1A2B26);
}
.trafic-banner__message strong {
    color: var(--color-success, #1D9E75);
}
.trafic-banner__time {
    color: var(--color-text-muted, #5A6B66);
    font-size: 0.8rem;
    font-style: italic;
    flex-shrink: 0;
}

/* --- Cas 2 : bloc complet quand il y a au moins une perturbation --- */
.trafic-block {
    margin-bottom: 2rem;
    padding: 1.25rem 1.25rem 1rem;
    border-radius: var(--radius-lg, 12px);
    border-left: 5px solid var(--color-warning, #BA7517);
    background: var(--color-warning-bg, #FAEEDA);
}
@media (min-width: 768px) {
    .trafic-block {
        padding: 1.5rem 1.5rem 1.25rem;
    }
}
.trafic-block.trafic--bloquante {
    border-left-color: var(--color-danger, #A32D2D);
    background: var(--color-danger-bg, #FCEBEB);
}
.trafic-block.trafic--info {
    border-left-color: var(--color-info, #185FA5);
    background: var(--color-info-bg, #E6F1FB);
}

.trafic-block__header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    margin-bottom: 0.75rem;
}
.trafic-block__heading {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.trafic-block__icon {
    font-size: 1.1rem;
}
.trafic-block__title {
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0;
    color: var(--color-text, #1A2B26);
    line-height: 1.3;
}
@media (min-width: 768px) {
    .trafic-block__title {
        font-size: 1.25rem;
    }
}
.trafic-block__time {
    color: var(--color-text-muted, #5A6B66);
    font-size: 0.8rem;
    font-style: italic;
}

.trafic-block__lead {
    margin: 0 0 1rem 0;
    color: var(--color-text, #1A2B26);
    font-size: 0.95rem;
    line-height: 1.5;
}

.trafic-block__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.trafic-line {
    background: #FFFFFF;
    border: 1px solid var(--color-border, #E0E6E4);
    border-radius: var(--radius-md, 8px);
    padding: 0.85rem 1rem;
}
.trafic-line__head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--color-border, #E0E6E4);
}
.trafic-line__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    min-width: 2rem;
    border-radius: 50%;
    font-weight: 700;
    font-size: 0.9rem;
    line-height: 1;
    flex-shrink: 0;
    box-sizing: border-box;
}
.trafic-line__name {
    font-weight: 600;
    color: var(--color-text, #1A2B26);
}

.trafic-line__disruptions {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.trafic-disruption {
    font-size: 0.9rem;
    line-height: 1.5;
}
.trafic-disruption__sev {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.15rem;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.trafic-dot {
    display: inline-block;
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    flex-shrink: 0;
}
.trafic-dot--bloquante { background: var(--color-danger, #A32D2D); }
.trafic-dot--perturbee { background: var(--color-warning, #BA7517); }
.trafic-dot--info      { background: var(--color-info, #185FA5); }

.trafic-disruption__title {
    margin: 0.1rem 0 0.15rem;
    font-weight: 600;
    color: var(--color-text, #1A2B26);
}
.trafic-disruption__msg {
    margin: 0;
    color: var(--color-text-muted, #5A6B66);
}

.trafic-block__footer {
    margin: 1rem 0 0;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    color: var(--color-success, #1D9E75);
    font-size: 0.85rem;
    line-height: 1.4;
}
.trafic-block__footer-icon {
    font-weight: 700;
    margin-right: 0.25rem;
}

/* Paragraphe SEO statique sous le bloc trafic (toujours visible) */
.trafic-info-seo {
    margin-bottom: 2rem;
    padding: 1rem 1.25rem;
    border-left: 3px solid var(--color-primary, #0F6E56);
    background: var(--color-bg-alt, #F7F9F8);
    border-radius: 0 var(--radius-md, 8px) var(--radius-md, 8px) 0;
}
@media (min-width: 768px) {
    .trafic-info-seo {
        padding: 1.1rem 1.5rem;
    }
}
.trafic-info-seo__title {
    margin: 0 0 0.5rem 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-text, #1A2B26);
    line-height: 1.3;
}
@media (min-width: 768px) {
    .trafic-info-seo__title {
        font-size: 1.15rem;
    }
}
.trafic-info-seo__lead {
    margin: 0 0 0.5rem 0;
    color: var(--color-text-muted, #5A6B66);
    font-size: 0.95rem;
    line-height: 1.55;
}
.trafic-info-seo__lead:last-child {
    margin-bottom: 0;
}
.trafic-info-seo__lead strong {
    color: var(--color-text, #1A2B26);
    font-weight: 600;
}

/* ============================================================
   13. CARTE INTERACTIVE (Leaflet, lazy load au clic)
   ============================================================ */

.section-carte {
    margin-top: 2.5rem;
}

.carte-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--color-primary, #0F6E56);
    color: var(--color-primary-fg, #FFFFFF);
    border: 0;
    padding: 0.75rem 1.5rem;
    border-radius: var(--station-radius, 12px);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    margin-top: 0.25rem;
    transition: background var(--transition-base, 0.2s ease),
                transform var(--transition-base, 0.2s ease),
                box-shadow var(--transition-base, 0.2s ease);
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.04));
}
.carte-trigger:hover:not(:disabled) {
    background: var(--color-primary-dark, #085041);
    box-shadow: var(--shadow-md, 0 2px 8px rgba(0,0,0,0.06));
}
.carte-trigger:active:not(:disabled) {
    transform: scale(0.98);
}
.carte-trigger:disabled {
    opacity: 0.7;
    cursor: wait;
}
.carte-trigger:focus-visible {
    outline: 3px solid var(--color-primary-bg, #E1F5EE);
    outline-offset: 2px;
}

.carte-container {
    margin-top: 1rem;
    height: 400px;
    border-radius: var(--station-radius, 12px);
    overflow: hidden;
    box-shadow: var(--shadow-md, 0 2px 8px rgba(0,0,0,0.06));
    background: var(--color-bg-tertiary, #F1F3F2);
}
@media (min-width: 768px) {
    .carte-container {
        height: 500px;
    }
}
.carte-container[hidden] {
    display: none !important;
}
.carte-leaflet {
    width: 100%;
    height: 100%;
}

/* --- Marqueurs custom (divIcon Leaflet) --- */

/* Tous les markers : on neutralise le fond/border par defaut de Leaflet */
.marker-station,
.marker-exit,
.marker-poi {
    background: transparent !important;
    border: 0 !important;
}

.marker-station__inner {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--color-primary, #0F6E56);
    color: var(--color-primary-fg, #FFFFFF);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 1;
    box-shadow: 0 2px 6px rgba(0,0,0,0.35);
    border: 2px solid #fff;
}

.marker-exit__inner {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--color-success, #1D9E75);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
    line-height: 1;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    border: 2px solid #fff;
    font-variant-numeric: tabular-nums;
}

.marker-poi__inner {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--color-primary, #0F6E56);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    line-height: 1;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* --- Popup styling (les popups Leaflet sont rendus dans .leaflet-popup-content) --- */
.marker-popup strong {
    display: block;
    font-size: 0.95rem;
    color: var(--color-text, #1A2B26);
    margin-bottom: 0.15rem;
    line-height: 1.3;
}
.marker-popup__name {
    display: block;
    font-size: 0.85rem;
    color: var(--color-text-muted, #5A6B66);
}
.marker-popup__cat {
    display: inline-block;
    margin-top: 0.15rem;
    font-size: 0.7rem;
    color: var(--color-primary-darker, #04342C);
    background: var(--color-primary-bg, #E1F5EE);
    padding: 0.1rem 0.45rem;
    border-radius: var(--radius-sm, 4px);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 700;
}
.marker-popup__addr,
.marker-popup__exit {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.78rem;
    color: var(--color-text-muted, #5A6B66);
    line-height: 1.4;
}
.marker-popup__exit {
    color: var(--color-primary-darker, #04342C);
    font-weight: 600;
}

/* ============================================================
   14. QUICK LINKS (barre de raccourcis sous le hero)
   ============================================================ */

.quick-links {
    margin: 0 0 1.25rem 0;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--color-border, #E0E6E4);
}
@media (min-width: 768px) {
    .quick-links {
        margin-bottom: 1.5rem;
    }
}

.quick-links__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 0.5rem;
    /* Mobile : scroll horizontal touch-friendly, pas de wrap */
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    /* Cache la scrollbar par defaut sur webkit (apparait au hover) */
    scroll-snap-type: x proximity;
}
.quick-links__list::-webkit-scrollbar {
    height: 4px;
}
.quick-links__list::-webkit-scrollbar-thumb {
    background: var(--color-border, #E0E6E4);
    border-radius: 4px;
}
@media (min-width: 768px) {
    .quick-links__list {
        gap: 0.75rem;
        flex-wrap: wrap; /* desktop : wrap si manque de place */
        overflow-x: visible;
    }
}

.quick-links__item {
    flex-shrink: 0;
    scroll-snap-align: start;
}

.quick-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 1rem;
    background: var(--color-bg-alt, #F7F9F8);
    color: var(--color-text, #1A2B26);
    border: 1px solid var(--color-border, #E0E6E4);
    border-radius: var(--radius-full, 9999px);
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    line-height: 1.2;
    white-space: nowrap;
    transition: background var(--transition-base, 0.2s ease),
                color var(--transition-base, 0.2s ease),
                border-color var(--transition-base, 0.2s ease),
                transform var(--transition-base, 0.2s ease);
}
.quick-link:hover {
    background: var(--color-primary-bg, #E1F5EE);
    color: var(--color-primary-darker, #04342C);
    border-color: var(--color-primary, #0F6E56);
}
.quick-link:focus-visible {
    outline: 3px solid var(--color-primary-bg, #E1F5EE);
    outline-offset: 2px;
}
.quick-link:active {
    transform: scale(0.97);
}

.quick-link__icon {
    font-size: 1rem;
    line-height: 1;
}
.quick-link__label {
    font-weight: 500;
}

/* Variante alerte : trafic perturbé */
.quick-link--alert {
    background: var(--color-warning-bg, #FAEEDA);
    color: var(--color-warning, #BA7517);
    border-color: var(--color-warning, #BA7517);
    font-weight: 600;
}
.quick-link--alert:hover {
    background: var(--color-warning, #BA7517);
    color: #FFFFFF;
    border-color: var(--color-warning, #BA7517);
}

/* Badge à droite du label */
.quick-link__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.4rem;
    border-radius: var(--radius-full, 9999px);
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
    margin-left: 0.15rem;
    font-variant-numeric: tabular-nums;
}
.quick-link__badge--ok {
    background: var(--color-success-bg, #E1F5EE);
    color: var(--color-success, #1D9E75);
}
.quick-link__badge--alert {
    background: var(--color-warning, #BA7517);
    color: #FFFFFF;
}
.quick-link--alert:hover .quick-link__badge--alert {
    background: #FFFFFF;
    color: var(--color-warning, #BA7517);
}

/* ============================================================
   15. LE SAVIEZ-VOUS (cards anecdotes, position : apres histoire,
       avant FAQ). Grille 1 col mobile / 2 cols tablet / 3 cols desktop.
   ============================================================ */
.section-trivia {
    /* hereditaire de .station-section pour padding/scroll-margin-top */
}

.trivia-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    margin-top: 1rem;
}
@media (min-width: 600px) {
    .trivia-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (min-width: 960px) {
    .trivia-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.trivia-card {
    background: var(--color-bg-light, #F4F8F6);
    padding: 1.5rem;
    border-radius: var(--station-radius, 12px);
    box-shadow: 0 1px 2px rgba(15, 30, 26, 0.04), 0 2px 8px rgba(15, 30, 26, 0.04);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.trivia-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 4px rgba(15, 30, 26, 0.06), 0 8px 24px rgba(15, 30, 26, 0.08);
}

.trivia-icon {
    font-size: 2rem;
    line-height: 1;
    margin-bottom: 0.75rem;
}

.trivia-title {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-text, #0F1E1A);
    margin: 0 0 0.5rem 0;
}

.trivia-content {
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--color-text-muted, #5A6B66);
    margin: 0;
}

/* ============================================================
   16. DATE DE MISE A JOUR (signal de fraicheur Discover).
       Petit, discret, aligne a droite ; centre sur mobile.
   ============================================================ */
.station-last-updated {
    margin: 2.5rem 0 0;
    text-align: right;
    font-size: 0.85em;
    color: var(--color-text-muted, #5A6B66);
    font-style: italic;
}
@media (max-width: 599px) {
    .station-last-updated {
        text-align: center;
    }
}