/* =========================================
 * V155: CONTRÔLES CARTE - DESIGN PREMIUM
 * Style inspiré Google Maps / Apple Plans
 * ========================================= */

/* Cacher TOUS les contrôles Leaflet natifs */
.leaflet-control-zoom,
.leaflet-control-layers,
.leaflet-control-scale {
    display: none !important;
}

/* Attribution discrète */
.leaflet-control-attribution {
    font-size: 9px;
    background: rgba(255,255,255,0.7) !important;
    padding: 2px 8px !important;
    border-radius: 4px 0 0 0;
    color: #666;
}

body.dark-theme .leaflet-control-attribution {
    background: rgba(15, 20, 30, 0.7) !important;
    color: rgba(255,255,255,0.5);
}

/* =========================================
 * BARRE DE CONTRÔLES FLOTTANTE
 * Groupe de boutons élégant à droite
 * ========================================= */

/* V158: Conteneur bouton localisation seul - rond */
.map-floating-controls {
    display: flex;
    border-radius: 50%;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 
        0 2px 10px rgba(0, 0, 0, 0.12),
        0 1px 4px rgba(0, 0, 0, 0.08);
}

.leaflet-bottom.leaflet-right .map-floating-controls {
    margin-bottom: 20px;
    margin-right: 14px;
}

/* =========================================
 * BOUTON LOCALISATION - STYLE PREMIUM
 * ========================================= */
.map-btn-locate {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    padding: 0;
    margin: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    transition: all 0.15s ease;
}

.map-btn-locate:hover {
    background: rgba(34, 197, 94, 0.08);
}

.map-btn-locate:active {
    background: rgba(34, 197, 94, 0.15);
    transform: scale(0.96);
}

.map-btn-locate svg {
    width: 22px;
    height: 22px;
    color: #22c55e;
    transition: all 0.15s ease;
}

.map-btn-locate:hover svg {
    color: #16a34a;
    transform: scale(1.1);
}

/* État de chargement - pulsation douce */
.map-btn-locate.is-loading {
    pointer-events: none;
}

.map-btn-locate.is-loading svg {
    animation: locate-pulse 1s ease-in-out infinite;
}

@keyframes locate-pulse {
    0%, 100% { 
        opacity: 1;
        transform: scale(1);
    }
    50% { 
        opacity: 0.5;
        transform: scale(0.9);
    }
}

/* État d'erreur */
.map-btn-locate.has-error {
    background: rgba(239, 68, 68, 0.1);
}

.map-btn-locate.has-error svg {
    color: #ef4444;
    animation: locate-shake 0.4s ease;
}

@keyframes locate-shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-3px); }
    40%, 80% { transform: translateX(3px); }
}

/* =========================================
 * DARK THEME
 * ========================================= */
body.dark-theme .map-floating-controls {
    background: #1e2330;
    box-shadow: 
        0 4px 24px rgba(0, 0, 0, 0.4),
        0 2px 8px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}



body.dark-theme .map-btn-locate:hover {
    background: rgba(34, 197, 94, 0.12);
}

body.dark-theme .map-btn-locate svg {
    color: #4ade80;
}

body.dark-theme .map-btn-locate:hover svg {
    color: #22c55e;
}

body.dark-theme .map-btn-locate.has-error {
    background: rgba(239, 68, 68, 0.15);
}

/* =========================================
 * RESPONSIVE MOBILE
 * ========================================= */
@media (max-width: 768px) {
    .leaflet-bottom.leaflet-right .map-floating-controls {
        margin-bottom: 90px;
        margin-right: 12px;
    }
    
    .map-floating-controls {
        border-radius: 12px;
    }
    
    .map-btn-locate {
        width: 44px;
        height: 44px;
    }
    
    .map-btn-locate svg {
        width: 20px;
        height: 20px;
    }
}

/* Très petits écrans */
@media (max-width: 380px) {
    .leaflet-bottom.leaflet-right .map-floating-controls {
        margin-right: 8px;
    }
    
    .map-btn-locate,
    .map-btn-zoom-in,
    .map-btn-zoom-out,
    .map-control-btn {
        width: 40px;
        height: 40px;
    }
}

/* =========================================
 * CHARTE GRAPHIQUE PÉRIMAP - IDENTITÉ VISUELLE
 * =========================================
 * 
 * 🎨 COULEURS OFFICIELLES:
 * - Vert Périmap (primaire): #22c55e
 * - Cyan (secondaire): #00c8ff
 * - Gradient signature: linear-gradient(135deg, #22c55e, #00c8ff)
 * 
 * 🔤 TYPOGRAPHIE:
 * - Police: Manrope (Google Fonts)
 * - Fallback: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif
 * 
 * Voir css/brand.css pour la documentation complète
 * ========================================= */
:root {
    /* ═══════════════════════════════════════════════════════════════════════
       COULEURS PÉRIMAP - IDENTITÉ OFFICIELLE
       ═══════════════════════════════════════════════════════════════════════ */
    
    /* Couleur primaire - Vert Périmap */
    --pm-green: #22c55e;
    --pm-green-hover: #16a34a;
    --pm-green-light: rgba(34, 197, 94, 0.1);
    --pm-green-glow: rgba(34, 197, 94, 0.3);
    
    /* Couleur secondaire - Cyan */
    --pm-cyan: #00c8ff;
    --pm-cyan-hover: #0ea5e9;
    --pm-cyan-light: rgba(0, 200, 255, 0.1);
    
    /* Gradient signature Périmap */
    --pm-gradient: linear-gradient(135deg, #22c55e 0%, #00c8ff 100%);
    --pm-gradient-text: linear-gradient(135deg, #22c55e, #00c8ff);
    
    /* ═══════════════════════════════════════════════════════════════════════
       MAPPING ANCIEN → NOUVEAU (compatibilité)
       ═══════════════════════════════════════════════════════════════════════ */
    
    /* Anciennes variables (conservées pour compatibilité) */
    --color-blue: #007bff;
    --color-purple: #6f42c1;
    --color-orange: #fd7e14;
    --color-green: var(--pm-green);      /* Unifié avec vert Périmap */
    --color-red: #ef4444;
    --color-yellow: #eab308;
    --color-green-check: var(--pm-green);
    --color-tab-active: var(--pm-green); /* Unifié avec vert Périmap */
    --color-nav-condensed-bg: #0f172a;   /* Fond sombre cohérent */
    --color-nav-condensed-hover: #1e293b;

    /* Palette de base - Alignée sur charte Périmap */
    --primary: var(--pm-green);          /* Vert Périmap comme primaire */
    --primary-dark: var(--pm-green-hover);
    --secondary: #64748b;
    --bg-light: #f8fafc;
    --bg-main: #ffffff;
    --bg-secondary: #f1f5f9;
    --text-primary: #0f172a;
    --text-secondary: #64748b;
    --border: #e2e8f0;
    
    /* Ombres */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    --shadow-glow: 0 0 20px var(--pm-green-glow);

    /* Rayons de bordure */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 9999px;
    
    /* Transitions */
    --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* =========================================
 * OPTIMISATIONS PERFORMANCE CSS
 * ========================================= */
/* GPU acceleration pour les éléments animés */
.card, .btn, .nav-dropdown-menu, .bottom-sheet, .modal {
    will-change: transform, opacity;
    transform: translateZ(0);
}

/* Optimiser le rendu des sections hors écran */
#map-view, #itinerary-view, #detail-panel, .tarifs-container {
    content-visibility: auto;
    contain-intrinsic-size: 0 500px;
}

/* Réduire le reflow sur les éléments fixes */
#main-header {
    contain: layout style;
}

/* Optimiser le scroll */
.results-list, .bottom-sheet-content, .tarifs-card-body {
    contain: content;
    overflow-anchor: none;
}

/* Dark theme - Aligné sur charte Périmap */
body.dark-theme {
    --bg-main: #0b1220;
    --bg-secondary: #0f1724;
    --bg-light: #0b1220;
    --text-primary: #e6eef8;
    --text-secondary: #9fb3c9;
    --border: rgba(255,255,255,0.08);
    --primary: var(--pm-green);
    --primary-dark: var(--pm-green-hover);
    --color-tab-active: var(--pm-green);
    --color-nav-condensed-bg: rgba(11, 18, 32, 0.95);
}

/* Small visual adjustments in dark mode */
body.dark-theme #main-header {
    background: rgba(6,10,14,0.7);
    border-bottom-color: rgba(255,255,255,0.04);
}

body.dark-theme .card, body.dark-theme .instruction-content, body.dark-theme .leaflet-popup-content-wrapper {
    background: rgba(8,12,18,0.6);
    border-color: rgba(255,255,255,0.04);
}
body.dark-theme .btn, body.dark-theme .btn-icon-round {
    background: rgba(255,255,255,0.02);
    color: var(--text-primary);
    border-color: rgba(255,255,255,0.04);
}
body.dark-theme .nav-button-condensed {
    color: white;
}
body.dark-theme #map { background: #06131b; }

/* =========================================
 * ANIMATIONS & KEYFRAMES
 * ========================================= */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

@keyframes ripple {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(100%);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }
    50% {
        transform: scale(1.05);
    }
    70% {
        transform: scale(0.9);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Animation utility classes */
.animate-fade-in {
    animation: fadeIn var(--transition-normal) ease-out forwards;
}

.animate-fade-in-up {
    animation: fadeInUp var(--transition-normal) ease-out forwards;
}

.animate-fade-in-down {
    animation: fadeInDown var(--transition-normal) ease-out forwards;
}

.animate-slide-in-left {
    animation: slideInLeft var(--transition-normal) ease-out forwards;
}

.animate-slide-in-right {
    animation: slideInRight var(--transition-normal) ease-out forwards;
}

.animate-scale-in {
    animation: scaleIn var(--transition-normal) ease-out forwards;
}

.animate-bounce-in {
    animation: bounceIn var(--transition-bounce) ease-out forwards;
}

/* Staggered animation delays for lists */
.stagger-1 { animation-delay: 0.05s; }
.stagger-2 { animation-delay: 0.1s; }
.stagger-3 { animation-delay: 0.15s; }
.stagger-4 { animation-delay: 0.2s; }
.stagger-5 { animation-delay: 0.25s; }
.stagger-6 { animation-delay: 0.3s; }

/* Notification badge animation */
.notification-badge {
    animation: pulse 2s ease-in-out infinite;
}

@keyframes notificationPop {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Page transition wrapper */
.page-transition-enter {
    opacity: 0;
    transform: translateY(10px);
}
.page-transition-enter-active {
    opacity: 1;
    transform: translateY(0);
    transition: opacity var(--transition-normal), transform var(--transition-normal);
}
.page-transition-exit {
    opacity: 1;
}
.page-transition-exit-active {
    opacity: 0;
    transition: opacity var(--transition-fast);
}

/* Loading skeleton animation */
@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

.skeleton {
    background: linear-gradient(90deg, var(--bg-secondary) 25%, var(--bg-light) 50%, var(--bg-secondary) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: var(--radius-sm);
}

body.dark-theme #results-map,
body.dark-theme #detail-map {
    background: #050c15;
}

/* =========================================
 * DARK THEME - TOP BAR V156
 * ========================================= */
body.dark-theme #top-bar {
    background: transparent;
}

body.dark-theme #btn-back-to-dashboard-from-map,
body.dark-theme #clock,
body.dark-theme #status-info {
    background: rgba(20, 25, 38, 0.95) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.06) !important;
}

body.dark-theme #btn-back-to-dashboard-from-map {
    color: #e2e8f0 !important;
}

body.dark-theme #btn-back-to-dashboard-from-map:hover {
    background: rgba(30, 38, 55, 0.98) !important;
}

body.dark-theme #clock {
    color: #e2e8f0;
}

body.dark-theme #clock svg {
    color: #64748b;
}

body.dark-theme #current-time {
    color: #f1f5f9;
}

body.dark-theme #date-indicator {
    color: #94a3b8;
    border-left-color: rgba(255, 255, 255, 0.1);
}

body.dark-theme #status-info {
    color: #e2e8f0;
}

body.dark-theme #bus-count {
    color: #4ade80 !important;
}

body.dark-theme #data-status {
    color: #94a3b8;
    border-left-color: rgba(255, 255, 255, 0.1);
}

body.dark-theme #data-status.loaded { 
    color: #4ade80; 
}

/* V72: Style dark mode séparé pour le bouton filtrer */
body.dark-theme #map-container #map-view #top-bar > #btn-toggle-filter {
    background: rgba(15, 23, 42, 0.95) !important;
    border-color: rgba(255,255,255,0.1) !important;
    color: #f1f5f9 !important;
}
body.dark-theme #route-filter-panel {
    background: rgba(4, 10, 18, 0.95);
    border-left: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 20px 30px rgba(0,0,0,0.65);
}
body.dark-theme #detail-map-summary {
    background: rgba(6, 12, 20, 0.9);
    color: var(--text-primary);
    box-shadow: 0 12px 30px rgba(0,0,0,0.55);
}
body.dark-theme #detail-map-header #btn-back-to-results {
    background: rgba(15, 23, 42, 0.95) !important;
    color: #f1f5f9 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
body.dark-theme input[type="text"],
body.dark-theme input[type="search"],
body.dark-theme .real-select,
body.dark-theme textarea {
    color: #f5f7fb;
    background-color: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.15);
}
body.dark-theme input[type="text"]::placeholder,
body.dark-theme input[type="search"]::placeholder,
body.dark-theme textarea::placeholder {
    color: rgba(245,247,251,0.6);
}
/* Adjust leaflet locate control in dark */
body.dark-theme .leaflet-control-locate { background-color: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.04); }

/* Smooth theme transition for colors/backgrounds */
body, .card, .planner-block, #main-header, #map, .btn, .btn-icon-round {
    transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease;
}

/* Ensure buttons remain interactive in dark-mode and have clear contrast */
.btn, .btn-icon-round {
    pointer-events: auto;
}
.btn-icon-round {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-icon-round:focus,
.btn-icon-round:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15), var(--shadow-md);
}

/* V153: Contrôles Leaflet modernisés */
.leaflet-bar {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* V153: Attribution Leaflet discrète */
.leaflet-control-attribution {
    background: rgba(255, 255, 255, 0.7) !important;
    color: #666 !important;
    border: none !important;
    border-radius: 4px !important;
    padding: 2px 6px !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
    box-shadow: none !important;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0.7;
    transition: opacity 0.2s;
}
.leaflet-control-attribution:hover {
    opacity: 1;
}
.leaflet-control-attribution a {
    color: #444 !important;
    text-decoration: none;
}
.leaflet-control-attribution a:hover {
    text-decoration: underline;
}

body.dark-theme .leaflet-control-attribution,
#map.dark-theme .leaflet-control-attribution,
#detail-map.dark-theme .leaflet-control-attribution,
#results-map.dark-theme .leaflet-control-attribution {
    background: rgba(0, 0, 0, 0.5) !important;
    color: rgba(255, 255, 255, 0.5) !important;
}
body.dark-theme .leaflet-control-attribution a,
#map.dark-theme .leaflet-control-attribution a,
#detail-map.dark-theme .leaflet-control-attribution a,
#results-map.dark-theme .leaflet-control-attribution a {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* Ensure the map container is not covered by header or other elements */
#map { z-index: 1; }

/* V153: Positionnement du bouton localisation */
.leaflet-top.leaflet-right {
    right: 12px;
    top: 12px;
}

/* Mobile: bouton plus bas pour éviter les contrôles système */
@media (max-width: 768px) {
    .leaflet-top.leaflet-right {
        right: 10px;
        top: auto;
        bottom: 80px;
    }
}

/* =========================================
 * NOUVELLE STRUCTURE DE BASE
 * ========================================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* *** CORRECTION V28 + V59 SCROLL MOBILE *** */
html, body {
    height: auto; /* V59: Permettre au contenu de définir la hauteur */
    min-height: 100%;
    width: 100%;
    overflow-x: hidden; 
    -webkit-font-smoothing: antialiased;
    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--text-primary);
    background-color: var(--bg-light); 
    overscroll-behavior-y: none;
}

/* Le body est le conteneur flex principal */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh; /* V59: Dynamic viewport height pour mobile */
    /* Par défaut, le body scrolle (pour le dashboard) */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch; /* V59: Smooth scroll iOS */
}

#app-view-root {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow-y: visible; /* V59: Ne pas bloquer le scroll */
}

#legal-strip {
    background: rgba(255, 255, 255, 0.92);
    border-top: 1px solid var(--border);
    padding: 0.75rem 1.25rem;
    font-size: 0.78rem;
    color: var(--text-secondary);
    box-shadow: 0 -6px 12px rgba(15, 23, 42, 0.05);
    width: 100%;
    margin-top: auto;
}

.legal-strip-content {
    max-width: 1300px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
    align-items: center;
    justify-content: space-between;
}

.legal-strip-content a {
    color: var(--primary);
    font-weight: 600;
}

.legal-strip-content code {
    font-family: "Manrope", monospace;
    font-size: 0.72rem;
    background: rgba(37, 99, 235, 0.08);
    padding: 0.1rem 0.35rem;
    border-radius: var(--radius-sm);
}

.legal-pill {
    padding: 0.2rem 0.65rem;
    border-radius: var(--radius-full);
    background: rgba(99, 102, 241, 0.12);
    color: var(--text-primary);
    font-weight: 600;
}

.legal-about-btn {
    margin-left: auto;
    background: var(--primary);
    color: #fff !important;
    padding: 0.4rem 1rem;
    border-radius: var(--radius-full);
    font-weight: 700;
    text-decoration: none;
    box-shadow: var(--shadow-sm);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.legal-about-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

body.dark-theme #legal-strip {
    background: rgba(6, 12, 20, 0.9);
    border-top-color: rgba(255,255,255,0.08);
    box-shadow: 0 -10px 24px rgba(0,0,0,0.4);
}

body.dark-theme .legal-strip-content code {
    background: rgba(74, 163, 255, 0.15);
}

body.dark-theme .legal-pill {
    background: rgba(74, 163, 255, 0.18);
    color: var(--text-primary);
}

body.dark-theme .legal-about-btn {
    background: var(--primary);
}

@media (max-width: 768px) {
    .legal-strip-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .legal-about-btn {
        margin-left: 0;
        width: 100%;
        text-align: center;
    }
}

body.about-page {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    background: var(--bg-light);
    padding-top: 0;
}

#main-header.about-header {
    position: sticky;
    top: 0;
    margin: 0;
    background: rgba(255,255,255,0.9);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
    z-index: 10;
    padding: 0 1.5rem;
}

.about-header-content {
    gap: 1rem;
}

.about-back-row {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    margin-bottom: 0.75rem;
}

.about-page .about-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.about-main {
    flex: 1;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 2.5rem 1.5rem 3rem;
}

.tile-layout > .about-tile:first-child {
    margin-top: 0.25rem;
}

.tile-layout {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
}

.about-card,
.about-tile {
    width: 100%;
    background: var(--bg-main);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 2rem;
    line-height: 1.6;
}

.about-card {
    line-height: 1.7;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeSlideUp 0.8s ease forwards;
}

.about-tile {
    min-height: 360px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1.25rem;
    opacity: 0;
    transform: translateY(32px);
    transition: transform 0.7s ease, opacity 0.7s ease;
}

.about-tile.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.hero-card {
    background-image: linear-gradient(135deg, rgba(37,99,235,0.12), rgba(99,102,241,0.08));
    border: 1px solid rgba(37,99,235,0.25);
}

.tile-primary {
    background-image: linear-gradient(135deg, rgba(37,99,235,0.08), rgba(99,102,241,0.05));
    border: 1px solid rgba(37,99,235,0.18);
}

.tile-secondary {
    background: var(--bg-main);
}

.about-page #main-header {
    padding: 0 1.5rem;
}

.about-page .about-header-content {
    align-items: center;
    min-height: 64px;
}

.about-page .about-back-btn {
    padding: 0.55rem 0.9rem;
    border-radius: var(--radius-full);
    font-weight: 600;
    border: 1px solid var(--border);
    color: var(--text-primary);
    background: rgba(255,255,255,0.75);
    box-shadow: var(--shadow-sm);
}

.about-page .about-back-btn svg {
    flex-shrink: 0;
}

.about-page .header-nav .btn-icon-round {
    width: 44px;
    height: 44px;
}

.about-page .install-btn {
    width: 100%;
    justify-content: center;
}

.about-page .hero-link {
    display: inline-flex;
    gap: 0.3rem;
    text-decoration: none;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: rgba(255,255,255,0.4);
    padding: 0.25rem 0.8rem;
    border-radius: var(--radius-full);
    font-weight: 600;
    color: var(--primary);
}

.hero-lede {
    font-size: 1.1rem;
    margin-top: 0.5rem;
    color: var(--text-primary);
}

.hero-link {
    display: inline-flex;
    align-items: center;
    font-weight: 700;
    margin-top: 1rem;
    color: var(--primary);
}

.about-meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin: 1.25rem 0;
}

.about-meta-grid h3 {
    font-size: 0.95rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.about-meta-grid p {
    margin-top: 0.35rem;
}

.about-card h1 {
    font-size: 2rem;
    margin-bottom: 1rem;
}

.about-card ul {
    margin: 1.5rem 0;
    padding-left: 1.2rem;
}

.about-card li {
    margin-bottom: 0.5rem;
}

.about-card a {
    color: var(--primary);
    font-weight: 600;
}


.info-card {
    background: var(--bg-main);
}

.info-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.tile-points {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.tile-points li span {
    display: block;
    font-weight: 700;
}

.tile-points small {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.install-blurb {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.install-helper {
    margin: 0.75rem 0 0.25rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.install-btn {
    margin-top: 1rem;
    border: none;
    background: var(--primary);
    color: #fff;
    font-weight: 700;
    padding: 0.85rem 1.5rem;
    border-radius: var(--radius-full);
    cursor: pointer;
    box-shadow: var(--shadow-md);
}

.install-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
}

.about-page #legal-strip {
    margin-top: auto;
}

body.dark-theme .about-card,
body.dark-theme .about-tile {
    background: rgba(6, 12, 20, 0.85);
    border-color: rgba(255,255,255,0.08);
    box-shadow: 0 15px 35px rgba(0,0,0,0.55);
}

body.dark-theme .hero-card {
    background-image: linear-gradient(135deg, rgba(74,163,255,0.18), rgba(37,99,235,0.08));
}

body.dark-theme .install-helper {
    color: var(--text-secondary);
}

@media (max-width: 768px) {
    .about-main {
        padding-top: 1.5rem;
    }

    .about-card,
    .about-tile {
        padding: 1.5rem;
    }
}

@media (max-width: 640px) {
    .about-page #main-header {
        padding: 0 1rem;
    }

    .about-back-row {
        padding: 0.75rem 1rem 0;
    }

    .about-page .about-main {
        padding: 1.5rem 1rem 2.25rem;
        gap: 1.1rem;
    }

    .about-page .tile-layout {
        gap: 1rem;
    }

    .about-page .about-tile {
        min-height: auto;
        gap: 0.95rem;
    }

    .about-page .hero-link {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 900px) {
    .about-page #main-header {
        padding: 0 1rem;
    }
}

@keyframes fadeSlideUp {
    from { opacity: 0; transform: translateY(25px); }
    to { opacity: 1; transform: translateY(0); }
}

.fade-in:nth-of-type(2) { animation-delay: 0.1s; }
.fade-in:nth-of-type(3) { animation-delay: 0.2s; }

/* Verrouille le scroll UNIQUEMENT pour les vues plein écran */
body.view-is-locked {
    position: fixed; /* Plus fiable que overflow: hidden */
    inset: 0; /* Évite les décalages quand on verrouille */
    width: 100%;
    overflow: hidden;
}

/* Quand la vue détail est ouverte, bloquer TOUT scroll */
body.detail-view-open {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    overflow: hidden !important;
    touch-action: none;
}

/* V67: Cacher header/footer Perimap sur la vue détail itinéraire */
body.detail-view-open #main-header,
body.detail-view-open #site-footer,
body.detail-view-open #legal-strip {
    display: none !important;
}

@media (max-width: 768px) {
    body.view-is-locked {
        position: relative; /* Laisse les sous-vues gérer leur propre scroll */
        inset: auto;
        height: auto; /* Laisse le body grandir selon son contenu */
        min-height: 100vh;
        overflow-y: auto; /* Réactive le scroll quand le contenu dépasse */
        overflow-x: hidden;
    }

    body.view-is-locked #app-view-root {
        min-height: 100vh; /* Garantit un conteneur flex plein écran */
    }
    
    /* Sur mobile, quand la vue détail est ouverte */
    body.detail-view-open {
        position: fixed !important;
        inset: 0 !important;
        overflow: hidden !important;
        touch-action: none !important;
    }
}

/* Conteneurs de vue principaux */
#dashboard-container {
    flex: 1 0 auto;
    /* Le dashboard utilise le scroll naturel du body - AUCUNE règle overflow */
    overflow-y: visible; /* V59: Permettre le scroll */
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0; /* Supprimé: le nouveau footer gère son propre espacement */
}

/* *** CORRECTION IDFM-STYLE *** */
/* La vue carte est plein écran, la vue itinéraire permet le scroll */
#map-container {
    flex: 1 0 auto; 
    display: flex;
    overflow: hidden; /* Vue carte plein écran ne scrolle pas */
}

#itinerary-results-container {
    flex: 1 0 auto; 
    display: flex;
    flex-direction: row;
    height: calc(100vh - 64px);
    min-height: 0;
    /* V66: Permettre le scroll sur la vue itinéraire */
}

/* V66: Bloquer le scroll du body UNIQUEMENT pour la vue carte */
body.view-map-locked {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
    height: 100% !important;
    top: 0 !important;
    left: 0 !important;
}

/* V120: Forcer la vue carte en plein écran sur mobile */
body.view-map-locked #map-container {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    height: 100dvh !important; /* Dynamic viewport height pour mobile */
    z-index: 10; /* V131: Réduit pour ne pas cacher les contrôles */
}

body.view-map-locked #map-view {
    height: 100% !important;
}

body.view-map-locked #map {
    height: 100% !important;
}

/* V64: Cacher la scrollbar sur la vue carte */
#map-container,
#map-view,
#map {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}
#map-container::-webkit-scrollbar,
#map-view::-webkit-scrollbar,
#map::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}


.hidden {
    display: none !important;
}
/* =========================================
 * NOUVELLE EN-TÊTE (Effet "Liquid Glass")
 * ========================================= */
#main-header {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px); 
    border-bottom: 1px solid var(--border);
    padding: 0 1.5rem;
    position: sticky; /* Reste sticky pour le dashboard */
    top: 0;
    z-index: 1050;
    flex-shrink: 0; /* Ne doit pas rétrécir */
}

@supports not (backdrop-filter: blur(10px)) {
    .hero-section .planner-block,
    .instruction-content,
    #main-header {
        background: rgba(255, 255, 255, 0.95);
    }
}

/* *** CORRECTION V30 *** */
/* Cache le header principal sur les vues plein écran */
body.view-is-locked #main-header {
    display: none;
}
body.view-is-locked #legal-strip {
    display: none;
}

/* V135+: Plein écran carte : enlever le chrome global pour libérer les contrôles (retour, heure, filtre) */
body.view-map-locked #main-header,
body.view-map-locked #site-footer,
body.view-map-locked #legal-strip {
    display: none !important;
}

/* V67: Cacher header/footer sur la vue liste itinéraire */
body.itinerary-view-active #main-header,
body.itinerary-view-active #site-footer,
body.itinerary-view-active #legal-strip {
    display: none !important;
}

/* V81: Retirer le padding-top quand le header est caché */
body.itinerary-view-active {
    padding-top: 0 !important;
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 64px;
    max-width: 1300px;
    margin: 0 auto;
}
.logo {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-weight: 800;
    color: var(--text-primary);
}
.header-logo-img {
    height: 52px;
    max-width: 170px;
    width: auto;
    object-fit: contain;
    display: block;
}
.header-title-group {
    display: flex;
    flex-direction: column;
    line-height: 1.05;
}
.brand-name {
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    background: linear-gradient(120deg, var(--primary), #14b8a6);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.brand-sub {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
}
.header-logo-icon {
    color: var(--primary);
}
.header-nav {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* =========================================
 * BANDEAU D'ALERTE TRAFIC (V84)
 * ========================================= */
#alert-banner {
    position: relative;
    z-index: 10;
    background: linear-gradient(135deg, var(--color-yellow) 0%, #fbbf24 100%);
    color: #1a1a1a;
    padding: 0.65rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
    font-weight: 500;
    margin: 0;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
#alert-banner.type-perturbation { 
    background: linear-gradient(135deg, var(--color-orange) 0%, #ea580c 100%); 
    color: white; 
    border-bottom-color: rgba(255,255,255,0.2);
}
#alert-banner.type-annulation { 
    background: linear-gradient(135deg, var(--color-red) 0%, #dc2626 100%); 
    color: white; 
    border-bottom-color: rgba(255,255,255,0.2);
}
#alert-banner.type-retard { 
    background: linear-gradient(135deg, var(--color-yellow) 0%, #fbbf24 100%); 
    color: #1a1a1a; 
}

#alert-banner-content {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    overflow: hidden;
}
#alert-banner-content svg {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
}
#alert-banner-content strong {
    font-weight: 600;
}
#alert-banner-close {
    background: rgba(0,0,0,0.1);
    border: none;
    color: inherit;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0.8;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
    margin-left: 0.5rem;
    flex-shrink: 0;
    transition: all var(--transition-fast);
}
#alert-banner-close:hover { 
    opacity: 1; 
    background: rgba(0,0,0,0.2);
}
#alert-banner.type-perturbation #alert-banner-close,
#alert-banner.type-annulation #alert-banner-close {
    background: rgba(255,255,255,0.15);
}
#alert-banner.type-perturbation #alert-banner-close:hover,
#alert-banner.type-annulation #alert-banner-close:hover {
    background: rgba(255,255,255,0.25);
}

/* =========================================
 * NOUVEAU TABLEAU DE BORD (HALL)
 * ========================================= */
#dashboard-main {
    max-width: 600px;
    margin: 0 auto;
    padding: 1.5rem 1rem;
    position: relative;
    z-index: 1;
    overflow-x: visible;
}

/* =========================================
 * DESIGN MINIMALISTE STYLE VITALIS
 * ========================================= */

/* Hero Backdrop avec image de Périgueux - PLEIN ÉCRAN */
.hero-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    background: url('https://www.voyageavecvue.com/wp-content/uploads/2023/11/perigueux.png') center top / cover no-repeat;
    z-index: 0;
    pointer-events: none;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, 
        rgba(30, 58, 95, 0.1) 0%, 
        rgba(30, 58, 95, 0.2) 30%,
        rgba(255, 255, 255, 0.6) 60%, 
        rgba(255, 255, 255, 0.85) 80%,
        rgba(255, 255, 255, 0.95) 100%);
    pointer-events: none;
}

#dashboard-hall {
    position: relative;
    z-index: 1;
    min-height: 100%;
}

.planner-section {
    padding: 0;
    position: relative;
    z-index: 50;
    padding-top: 4.5rem;
}

.planner-block {
    background: #FFFFFF;
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
    border: 1px solid #e5e7eb;
}

.planner-title {
    font-size: 1rem;
    font-weight: 700;
    color: #1e3a5f;
    margin: 0 0 1.25rem 0;
    text-align: center;
}

/* STYLES PLANIFICATEUR VERTICAL */
.planner-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
}

.planner-inputs-vertical {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.planner-inputs-vertical .form-group {
    margin-bottom: 0;
}

/* Ligne de swap - dans son propre espace */
.swap-button-row {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0;
    position: relative;
    z-index: 5;
}

.swap-line {
    flex: 1;
    height: 1px;
    background: #e2e8f0;
}

.btn-swap-direction {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #6b7280;
    border-radius: 50%;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    margin: 0 0.75rem;
    flex-shrink: 0;
}
.btn-swap-direction:hover {
    background: #f8fafc;
    border-color: #2a9d8f;
    color: #2a9d8f;
    box-shadow: 0 4px 12px rgba(42, 157, 143, 0.2);
}

/* Champs de saisie style Vitalis */
.planner-block .form-group input[type="text"] {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 1rem 1rem 1rem 2.75rem;
    font-size: 0.95rem;
    color: #1e3a5f;
    width: 100%;
    transition: all 0.2s ease;
    min-height: 52px;
    box-sizing: border-box;
}

.planner-block .form-group input[type="text"]::placeholder {
    color: #94a3b8;
}

.planner-block .form-group input[type="text"]:focus {
    background: #ffffff;
    border-color: #1e3a5f;
    box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.1);
    outline: none;
}

/* Icônes dans les inputs */
.input-with-icon {
    position: relative;
}

.input-with-icon .input-icon {
    position: absolute;
    left: 0.875rem;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    z-index: 1;
    pointer-events: none;
}

.input-with-icon input[type="text"] {
    padding-left: 2.75rem;
}

/* Bouton géolocalisation */
.btn-geolocate {
    position: absolute;
    top: 50%;
    right: 0.5rem;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: transparent;
    color: #64748b;
    border: none;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-geolocate:hover:not(:disabled) {
    background: #f1f5f9;
    color: #1e3a5f;
}

.btn-geolocate:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.btn-geolocate svg {
    width: 18px;
    height: 18px;
}

/* Options (Partir maintenant) */
.planner-options {
    position: relative;
    z-index: 100;
}

.btn-when {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.9rem;
    font-family: inherit;
    background: #f8fafc;
    cursor: pointer;
    text-align: left;
    color: #1e3a5f;
    transition: all 0.2s ease;
}

.btn-when > svg:first-child {
    color: #1e3a5f;
    flex-shrink: 0;
}

.btn-when > span {
    flex: 1;
}

.btn-when > .chevron {
    color: #94a3b8;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.btn-when:hover {
    border-color: #1e3a5f;
    background: #ffffff;
}

.btn-when.popover-active > .chevron {
    transform: rotate(180deg);
}

/* Bouton Rechercher style PériMap (vert teal/canard) */
.planner-search-btn,
#planner-submit-btn {
    padding: 0.875rem 2rem !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    border-radius: 12px !important;
    background: #2a9d8f !important;
    border: none !important;
    color: #ffffff !important;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: 0.75rem;
    width: 100%;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
}

.planner-search-btn:hover,
#planner-submit-btn:hover {
    background: #238b7e !important;
    box-shadow: 0 6px 20px rgba(42, 157, 143, 0.4) !important;
    transform: translateY(-2px);
}

.planner-search-btn:active,
#planner-submit-btn:active {
    transform: translateY(0) scale(0.98);
}

/* Popover styles */
.popover-tabs {
    display: flex;
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 1rem;
}

.popover-tab {
    flex: 1;
    padding: 0.75rem;
    background: none;
    border: none;
    font-size: 0.9rem;
    font-weight: 500;
    color: #64748b;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.2s ease;
}

.popover-tab.active {
    color: #1e3a5f;
    border-bottom-color: #1e3a5f;
}

.popover-time-inputs {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
}

.time-separator {
    font-size: 1.25rem;
    font-weight: 600;
    color: #64748b;
    padding-bottom: 0.75rem;
}

/* Dark theme support */
body.dark-theme .hero-backdrop {
    opacity: 0.5;
}

body.dark-theme .hero-overlay {
    background: linear-gradient(to bottom, 
        rgba(15, 23, 42, 0.4) 0%, 
        rgba(15, 23, 42, 0.6) 30%,
        rgba(15, 23, 42, 0.85) 60%, 
        rgba(15, 23, 42, 0.95) 80%,
        #0f172a 100%);
}

body.dark-theme .planner-block {
    background: rgba(15, 23, 42, 0.95);
    border-color: rgba(255,255,255,0.08);
}

body.dark-theme .planner-title {
    color: #e2e8f0;
}

body.dark-theme .planner-block .form-group input[type="text"] {
    background: rgba(30, 41, 59, 0.8);
    border: 1px solid #374151;
    color: #e2e8f0;
}

body.dark-theme .planner-block .form-group input[type="text"]::placeholder {
    color: rgba(255,255,255,0.5);
}

body.dark-theme .planner-block .form-group input[type="text"]:focus {
    background: rgba(30, 41, 59, 0.95);
    border-color: #2a9d8f;
    box-shadow: 0 0 0 3px rgba(42, 157, 143, 0.2);
}

body.dark-theme .btn-when {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.1);
    color: #e2e8f0;
}

body.dark-theme .swap-line {
    background: #374151;
}

body.dark-theme .btn-swap-direction {
    background: rgba(30, 41, 59, 0.95);
    border-color: #374151;
    color: rgba(255,255,255,0.7);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

body.dark-theme .btn-swap-direction:hover {
    background: rgba(42, 157, 143, 0.2);
    border-color: #2a9d8f;
    color: #2a9d8f;
}

body.dark-theme .input-with-icon .input-icon {
    color: rgba(255,255,255,0.5);
}

body.dark-theme .btn-geolocate {
    color: rgba(255,255,255,0.6);
    background: transparent;
}

body.dark-theme .btn-geolocate:hover:not(:disabled) {
    background: rgba(42, 157, 143, 0.2);
    color: #e2e8f0;
}

/* Network delays widget */
.network-delays-widget {
    margin-top: 1.5rem;
    background: #fffbeb;
    border: 1px solid #fcd34d;
    border-radius: var(--radius-md);
    padding: 1rem;
}

.network-delays-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: #92400e;
    margin-bottom: 0.75rem;
}

/* =========================================
 * QUICK ACTIONS (Carte, Horaires, Trafic)
 * ========================================= */
.quick-actions-section {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-top: 1.5rem;
    position: relative;
    z-index: 1;
}

.quick-action-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem 0.75rem;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: var(--radius-lg);
    cursor: pointer;
    text-decoration: none;
    color: #1e3a5f;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.quick-action-card:hover {
    border-color: #2a9d8f;
    box-shadow: 0 8px 24px rgba(42, 157, 143, 0.18);
    transform: translateY(-3px);
}

.quick-action-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(42, 157, 143, 0.1);
    border-radius: 12px;
    color: #2a9d8f;
}

.quick-action-icon svg {
    stroke-width: 2.5;
}

.quick-action-card span {
    font-size: 0.85rem;
    font-weight: 600;
    text-align: center;
    color: #1e3a5f;
}

/* Dark theme quick actions - bordures visibles */
body.dark-theme .quick-action-card {
    background: rgba(30, 41, 59, 0.9);
    border: 1px solid #374151;
    color: #e2e8f0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

body.dark-theme .quick-action-card:hover {
    border-color: #2a9d8f;
    background: rgba(42, 157, 143, 0.1);
    box-shadow: 0 8px 24px rgba(42, 157, 143, 0.2);
}

body.dark-theme .quick-action-icon {
    background: rgba(42, 157, 143, 0.2);
    color: #2a9d8f;
}

body.dark-theme .quick-action-card span {
    color: #e2e8f0;
}

/* =========================================
 * NEWS BANNER (Actualités / État trafic)
 * ========================================= */
.news-banner {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.5rem;
    padding: 0.875rem 1rem;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: var(--radius-lg);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    position: relative;
    z-index: 1;
}

.news-banner-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(42, 157, 143, 0.1);
    border-radius: 10px;
    color: #2a9d8f;
    flex-shrink: 0;
}

.news-banner-content {
    flex: 1;
    min-width: 0;
}

.news-banner-label {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #2a9d8f;
    margin-bottom: 0.125rem;
}

.news-banner-text {
    display: block;
    font-size: 0.85rem;
    color: #1e3a5f;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative;
}

/* Animation marquee style LED */
.news-banner-text.marquee-text {
    text-overflow: clip;
}

.news-banner-text .marquee-inner {
    display: inline-block;
    white-space: nowrap;
    padding-left: 0;
}

.news-banner-text.marquee-active .marquee-inner {
    animation: marquee-scroll 15s linear infinite;
    padding-left: 100%;
}

@keyframes marquee-scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}

/* Pause animation on hover */
.news-banner:hover .marquee-inner {
    animation-play-state: paused;
}

/* Styles de sévérité pour le bandeau */
.news-banner.severity-perturbation {
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.1) 0%, rgba(234, 88, 12, 0.15) 100%);
    border-color: rgba(249, 115, 22, 0.3);
}

.news-banner.severity-perturbation .news-banner-icon {
    background: rgba(249, 115, 22, 0.2);
    color: #ea580c;
}

.news-banner.severity-perturbation .news-banner-label {
    color: #ea580c;
}

.news-banner.severity-retard {
    background: linear-gradient(135deg, rgba(234, 179, 8, 0.1) 0%, rgba(202, 138, 4, 0.15) 100%);
    border-color: rgba(234, 179, 8, 0.3);
}

.news-banner.severity-retard .news-banner-icon {
    background: rgba(234, 179, 8, 0.2);
    color: #ca8a04;
}

.news-banner.severity-retard .news-banner-label {
    color: #ca8a04;
}

.news-banner.severity-annulation {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, rgba(220, 38, 38, 0.15) 100%);
    border-color: rgba(239, 68, 68, 0.3);
}

.news-banner.severity-annulation .news-banner-icon {
    background: rgba(239, 68, 68, 0.2);
    color: #dc2626;
}

.news-banner.severity-annulation .news-banner-label {
    color: #dc2626;
}

/* Bandeau cliquable */
.news-banner.has-perturbations {
    cursor: pointer;
    transition: all 0.2s ease;
}

.news-banner.has-perturbations:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.news-banner-link {
    padding: 0.375rem 0.875rem;
    background: #2a9d8f;
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 20px;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.news-banner-link:hover {
    background: #238b7e;
}

/* Dark theme news banner */
body.dark-theme .news-banner {
    background: rgba(15, 23, 42, 0.95);
    border-color: rgba(255,255,255,0.08);
}

body.dark-theme .news-banner-icon {
    background: rgba(42, 157, 143, 0.15);
}

body.dark-theme .news-banner-text {
    color: #e2e8f0;
}

/* Legacy stats section (kept for compatibility) */
body.dark-theme .stats-section .stat-number {
    color: #a3b83c;
}

body.dark-theme .stats-section .stat-label {
    color: rgba(255,255,255,0.6);
}

/* =========================================
 * ANCIEN PLANNER (GRID) - CONSERVÉ POUR RÉSULTATS
 * ========================================= */
.planner-inputs {
    --swap-col-width: 64px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--swap-col-width) minmax(0, 1fr);
    flex: 1;
    gap: 1rem;
    align-items: stretch;
    padding-left: 0;
    padding-right: 0;
    position: relative;
}
.planner-inputs .form-group {
    flex: 1;
    margin-bottom: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
.planner-inputs .form-group .input-with-action {
    flex: 1;
}

.planner-inputs .swap-button-slot {
    width: var(--swap-col-width);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}
.planner-inputs .swap-button-slot .btn-swap-direction {
    justify-self: center;
    align-self: center;
}

/* Note: Le style .planner-search-btn principal est défini plus haut avec le vert teal #2a9d8f */

.main-nav-buttons-condensed {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-top: 2.5rem; 
    max-width: 900px; 
    margin-left: auto;
    margin-right: auto;
    position: relative; 
    z-index: 1; /* Inférieur au planificateur */
}

/* Forcer les blocs bas (ex: cartes 'Notre réseau en chiffres') sous le planificateur */
.bottom-content-wrapper {
    position: relative;
    z-index: 1; /* Doit rester en dessous du bouton Rechercher (100) et du popover (1000) */
}

.nav-button-condensed {
    background: rgba(0, 90, 156, 0.75); 
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: var(--radius-md);
    padding: 1.5rem;
    font-size: 1.125rem;
    font-weight: 700;
    color: white;
    text-decoration: none;
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-normal), transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    overflow: hidden;
}
.nav-button-condensed::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, transparent 50%);
    opacity: 0;
    transition: opacity var(--transition-normal);
}
.nav-button-condensed:hover {
    background: rgba(0, 74, 128, 0.9); 
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 15px 30px -5px rgba(0, 90, 156, 0.4); 
}
.nav-button-condensed:hover::before {
    opacity: 1;
}
.nav-button-condensed:active {
    transform: translateY(-2px) scale(0.98);
    transition: transform 0.1s ease;
}
.nav-button-condensed svg {
    width: 28px;
    height: 28px;
    transition: transform var(--transition-normal);
}
.nav-button-condensed:hover svg {
    transform: scale(1.15);
}
.nav-button-condensed .notification-badge {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
}

.nav-button-condensed[data-view="horaires"] {
    background: rgba(40, 167, 69, 0.75); 
}
.nav-button-condensed[data-view="horaires"]:hover {
    background: rgba(35, 139, 58, 0.9); 
    box-shadow: 0 15px 30px -5px rgba(40, 167, 69, 0.5); 
}
.nav-button-condensed[data-view="info-trafic"] {
    background: rgba(253, 126, 20, 0.75); 
}
.nav-button-condensed[data-view="info-trafic"]:hover {
    background: rgba(228, 113, 18, 0.9); 
    box-shadow: 0 15px 30px -5px rgba(253, 126, 20, 0.5); 
}

.bottom-content-wrapper {
    margin-top: 2.5rem; 
    margin-bottom: 2rem; 
    max-width: 900px; 
    margin-left: auto;
    margin-right: auto;
}
.bottom-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}
.bottom-grid .card {
    display: flex; 
    flex-direction: column;
}
.bottom-grid .card h4 {
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
}
.bottom-grid .card p {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.6;
    flex: 1 0 auto; 
}

.key-figures-card p {
    margin-bottom: 1.5rem;
}
.key-figures-grid {
    display: flex;
    justify-content: space-around;
    text-align: center;
    gap: 1rem;
}
.key-figure-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.key-figure-number {
    font-size: 2.25rem;
    font-weight: 800;
    color: var(--primary);
    line-height: 1.1;
}
.key-figure-label {
    font-size: 0.875rem;
    color: var(--text-secondary);
    font-weight: 500;
    margin-top: 0.25rem;
}

.btn-block-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-top: 1.5rem; 
    padding: 0.75rem 1.25rem;
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: var(--radius-md);
}
.btn-block-link svg {
    transition: transform 0.2s ease;
}
.btn-block-link:hover svg {
    transform: translateY(3px);
}


/* =========================================
 * VUES INTERNES & TRANSITIONS (V48 - SANS ANIMATION)
 * ========================================= */
#dashboard-hall {
    /* SUPPRIMÉ: transition */
    visibility: visible;
    overflow-y: visible; /* V59: Permettre le scroll */
    padding-bottom: 40px; /* V59: Espace pour scroll complet en bas */
}
#dashboard-hall:not(.view-is-active) {
    /* SUPPRIMÉ: opacity, transform */
    display: none; /* V48 - Remplacement immédiat */
    pointer-events: none;
    max-height: 0;
    overflow: hidden;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

#dashboard-content-view {
    /* SUPPRIMÉ: opacity, transform, transition */
    display: none; /* V48 - Remplacement immédiat */
    pointer-events: none;
    max-height: 0;
    overflow: hidden;
}
#dashboard-content-view.view-is-active {
    /* SUPPRIMÉ: opacity, transform */
    display: block; /* V48 - Remplacement immédiat */
    pointer-events: auto;
    max-height: 5000px; 
}

#btn-back-to-hall {
    margin-bottom: 1.5rem;
    background: var(--bg-secondary);
    border-color: var(--border);
    color: var(--text-primary);
    font-weight: 600;
    padding-left: 0.75rem;
}
#btn-back-to-hall:hover {
    background: var(--border);
    border-color: var(--secondary);
}
#btn-back-to-hall svg {
    margin-right: 0.5rem;
    color: var(--text-secondary);
}

.itinerary-back-btn {
    background: var(--bg-secondary);
    border-color: var(--border);
    color: var(--text-primary);
    box-shadow: var(--shadow-sm);
    flex-shrink: 0;
}
.itinerary-back-btn svg {
    color: var(--text-secondary);
}

/* Force back button to be on top and clickable on desktop */
#btn-back-to-hall,
#btn-back-to-dashboard-from-map,
#btn-back-to-dashboard-from-results {
    pointer-events: auto !important;
    position: relative;
    z-index: 3000 !important;
}

.content-cards {
    display: grid;
    grid-template-columns: 1fr;
    max-width: 900px; 
    margin: 0 auto;
    gap: 1.5rem;
}

.card {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: var(--radius-md);
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition-normal), transform var(--transition-normal);
}

.card:hover {
    box-shadow: var(--shadow-md);
}
#dashboard-hall .card {
    /* SUPPRIMÉ (V48): opacity, transform */
    max-height: 2000px;
    padding: 1.5rem;
}

/* V48: Règle séparée pour cacher/montrer les cartes internes */
#dashboard-content-view .card {
    max-height: 0;
    overflow: hidden;
    padding: 0 1.5rem;
    display: none; /* V48: Caché par défaut */
}
#dashboard-content-view .card.view-active {
    /* SUPPRIMÉ (V48): opacity, transform */
    display: block; /* V48: Affiché si actif */
    max-height: 2000px; 
    padding: 1.5rem; 
}

.form-group {
    margin-bottom: 1rem;
    position: relative;
}
.form-group label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
}
.input-with-action {
    position: relative;
    width: 100%;
}
.form-group input[type="text"] {
    width: 100%;
    box-sizing: border-box; /* ensure padding doesn't change visual width */
    padding: 0.75rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    font-family: inherit;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform 0.15s ease;
    background: var(--bg-main); 
}
.form-group.has-geolocate input[type="text"] {
    padding-right: 3.25rem;
}
.form-group input[type="text"]:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.15), 0 2px 8px rgba(37, 99, 235, 0.1);
    outline: none;
    transform: scale(1.01);
}

/* =========================================
 * CARTE HORAIRES
 * ========================================= */
#horaires-search-container {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}
#horaires-search-container svg {
    position: absolute;
    left: 14px;
    color: var(--text-secondary);
    opacity: 0.6;
    z-index: 1;
}
#horaires-search-bar {
    width: 100%;
    padding: 0.75rem 1rem 0.75rem 2.5rem; 
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    font-size: 0.9rem;
}
#horaires-search-bar:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
    outline: none;
}
#horaires-search-results {
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    width: 100%;
    background: var(--bg-main);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    max-height: 300px;
    overflow-y: auto;
    z-index: 2000;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}
.search-result-item {
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    cursor: pointer;
    border-bottom: 1px solid var(--border);
}
.search-result-item:last-child { border-bottom: none; }
.search-result-item:hover { background: var(--bg-secondary); }
.search-result-item strong { color: var(--primary); }

.fiche-horaire-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 2rem 0 1rem 0;
    border-bottom: 1px solid var(--border);
    padding-bottom: 0.5rem;
}

#fiche-horaire-container {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--bg-main); 
}
.accordion-group details {
    border-bottom: 1px solid var(--border);
}
.accordion-group details:last-child {
    border-bottom: none;
}
.accordion-group summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 600;
    background: var(--bg-secondary);
    list-style: none; 
    transition: background 0.2s ease;
}
.accordion-group summary:hover {
    background: #f1f5f9;
}
.accordion-group summary::-webkit-details-marker {
    display: none; 
}
.accordion-group summary::after {
    content: '+';
    font-size: 1.5rem;
    font-weight: 300;
    color: var(--text-secondary);
    transition: transform 0.3s ease-in-out;
}
.accordion-group details[open] summary {
    background: var(--bg-main);
}
.accordion-group details[open] summary::after {
    transform: rotate(45deg);
}

.accordion-content {
    background: var(--bg-main);
    padding: 0 1.25rem; 
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.35s ease-in-out;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}
details[open] .accordion-content {
    max-height: 1000px; 
}
.accordion-content-inner {
    padding: 1rem 0;
}
.accordion-content-inner a {
    display: block;
    padding: 0.75rem 0;
    color: var(--primary);
    text-decoration: none;
    font-weight: 500;
    border-bottom: 1px solid var(--border);
}
.accordion-content-inner a:last-child {
    border-bottom: none;
}
.accordion-content-inner a:hover {
    text-decoration: underline;
}

#horaires-search-shortcut {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
    text-align: center;
}
#horaires-search-shortcut p {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 1rem;
}
#btn-horaires-search-focus {
    font-weight: 600;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}


/* =========================================
 * CARTE INFO TRAFIC
 * ========================================= */
.tabs {
    display: flex;
    border: 1px solid var(--color-tab-active);
    border-radius: var(--radius-md);
    margin-bottom: 1.5rem;
    overflow: hidden;
    background: var(--bg-main);
}
.tab {
    flex: 1;
    padding: 0.6rem 1rem;
    border: none;
    background: transparent; 
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-tab-active);
    transition: all var(--transition-normal);
    text-transform: capitalize;
    position: relative;
}
.tab::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: var(--color-tab-active);
    transition: width var(--transition-fast), left var(--transition-fast);
}
.tab:not(.active):hover::after {
    width: 100%;
    left: 0;
}
.tab.active {
    background: var(--color-tab-active);
    color: white;
}
.tab:not(.active):hover {
    background: rgba(0, 128, 128, 0.1); 
}
.tab:first-child {
    border-right: 1px solid var(--color-tab-active);
}
.tab-content {
    max-height: 450px;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.trafic-group {
    margin-bottom: 1.5rem;
}
.trafic-group h4 {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border);
}
.trafic-badge-list {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 0.75rem;
}
.trafic-badge-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    min-width: 45px;
    position: relative;
    transition: transform 0.15s ease;
}
.trafic-badge-item:active {
    transform: scale(0.95);
}
.line-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    padding: 0.375rem 0.625rem;
    font-weight: 700;
    font-size: 0.875rem;
    color: white;
    border-radius: var(--radius-md); 
    flex-shrink: 0;
    box-shadow: var(--shadow-sm);
    transition: all 0.2s ease;
}
.trafic-badge-item:hover .line-badge {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* === INDICATEURS D'ÉTAT DES LIGNES (style TBM) === */
.trafic-badge-item .status-icon {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: white;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    z-index: 1;
}

/* Retard - Jaune avec icône horloge */
.trafic-badge-item.status-retard .status-icon {
    background: var(--color-yellow);
    color: #1a1a1a;
}
.trafic-badge-item.status-retard .status-icon::before {
    content: "⏱";
    font-size: 10px;
}

/* Perturbation - Orange avec icône warning */
.trafic-badge-item.status-perturbation .status-icon {
    background: var(--color-orange);
}
.trafic-badge-item.status-perturbation .status-icon::before {
    content: "!";
    font-weight: 900;
}

/* Annulation - Rouge avec icône X */
.trafic-badge-item.status-annulation .status-icon {
    background: var(--color-red);
}
.trafic-badge-item.status-annulation .status-icon::before {
    content: "✕";
    font-size: 10px;
}

/* Travaux - Orange avec icône outil */
.trafic-badge-item.status-travaux .status-icon {
    background: var(--color-orange);
}
.trafic-badge-item.status-travaux .status-icon::before {
    content: "⚠";
    font-size: 10px;
}

/* Pas d'icône pour status normal */
.trafic-badge-item.status-normal .status-icon {
    display: none;
}

/* =========================================
 * MODAL DÉTAIL LIGNE (V112)
 * ========================================= */
.line-detail-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.line-detail-modal.active {
    opacity: 1;
    visibility: visible;
}

.line-detail-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.line-detail-content {
    position: relative;
    width: 90%;
    max-width: 420px;
    max-height: 85vh;
    background: var(--bg-primary);
    border: 2px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.1);
    overflow: hidden;
    transform: scale(0.95) translateY(20px);
    transition: transform 0.25s ease;
}

.line-detail-modal.active .line-detail-content {
    transform: scale(1) translateY(0);
}

.line-detail-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    color: var(--text-secondary);
    transition: all 0.2s ease;
    z-index: 10;
}

.line-detail-close:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.line-detail-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
}

.line-detail-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 56px;
    height: 40px;
    padding: 0 1rem;
    font-weight: 800;
    font-size: 1.25rem;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
}

.line-detail-name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    flex: 1;
}

.line-detail-body {
    padding: 1.25rem 1.5rem 1.5rem;
    overflow-y: auto;
    max-height: calc(85vh - 120px);
}

.line-detail-status {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-full);
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 1.25rem;
}

.line-detail-status.status-normal {
    background: rgba(34, 197, 94, 0.15);
    color: #16a34a;
}

.line-detail-status.status-perturbation {
    background: rgba(249, 115, 22, 0.15);
    color: #ea580c;
}

.line-detail-status.status-retard {
    background: rgba(234, 179, 8, 0.15);
    color: #ca8a04;
}

.line-detail-status.status-annulation {
    background: rgba(239, 68, 68, 0.15);
    color: #dc2626;
}

.line-detail-status.status-travaux {
    background: rgba(249, 115, 22, 0.15);
    color: #ea580c;
}

.line-detail-status .status-badge-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 700;
}

.line-detail-status.status-normal .status-badge-icon {
    background: #16a34a;
    color: white;
}

.line-detail-status.status-perturbation .status-badge-icon {
    background: #ea580c;
    color: white;
}

.line-detail-status.status-retard .status-badge-icon {
    background: #ca8a04;
    color: #1a1a1a;
}

.line-detail-status.status-annulation .status-badge-icon {
    background: #dc2626;
    color: white;
}

.line-detail-status.status-travaux .status-badge-icon {
    background: #ea580c;
    color: white;
}

.line-detail-section {
    margin-bottom: 1.25rem;
}

.line-detail-section:last-child {
    margin-bottom: 0;
}

.line-detail-section h4 {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
}

.line-detail-section p {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--text-primary);
    margin: 0;
}

/* Mobile */
@media (max-width: 480px) {
    .line-detail-content {
        width: 95%;
        max-height: 80vh;
    }
    
    .line-detail-header {
        padding: 1.25rem;
    }
    
    .line-detail-badge {
        min-width: 48px;
        height: 36px;
        font-size: 1.125rem;
    }
    
    .line-detail-body {
        padding: 1rem 1.25rem 1.25rem;
    }
}

/* =========================================
 * MODAL DÉTAIL BANDEAU (V114)
 * ========================================= */
.banner-detail-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.banner-detail-modal.active {
    opacity: 1;
    visibility: visible;
}

.banner-detail-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.banner-detail-content {
    position: relative;
    width: 90%;
    max-width: 480px;
    max-height: 80vh;
    background: var(--bg-primary);
    border-radius: var(--radius-xl);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
    overflow: hidden;
    transform: scale(0.95) translateY(20px);
    transition: transform 0.25s ease;
    display: flex;
    flex-direction: column;
}

.banner-detail-modal.active .banner-detail-content {
    transform: scale(1) translateY(0);
}

.banner-detail-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    color: var(--text-secondary);
    transition: all 0.2s ease;
    z-index: 10;
}

.banner-detail-close:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.banner-detail-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.25rem 1.5rem;
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.1) 0%, rgba(234, 88, 12, 0.15) 100%);
    border-bottom: 1px solid var(--border);
}

.banner-detail-header svg {
    color: #ea580c;
    flex-shrink: 0;
}

.banner-detail-header h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.banner-detail-body {
    flex: 1;
    overflow-y: auto;
    padding: 1rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.banner-perturbation-item {
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    padding: 1rem;
    border: 1px solid var(--border);
}

.banner-perturbation-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.banner-line-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 28px;
    padding: 0 0.75rem;
    font-weight: 800;
    font-size: 0.9rem;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.banner-status-tag {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.625rem;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 600;
}

.banner-status-tag.status-perturbation {
    background: rgba(249, 115, 22, 0.15);
    color: #ea580c;
}

.banner-status-tag.status-retard {
    background: rgba(234, 179, 8, 0.15);
    color: #ca8a04;
}

.banner-status-tag.status-annulation {
    background: rgba(239, 68, 68, 0.15);
    color: #dc2626;
}

.banner-status-tag.status-travaux {
    background: rgba(249, 115, 22, 0.15);
    color: #ea580c;
}

.banner-perturbation-message {
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--text-primary);
    margin: 0;
}

.banner-detail-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border);
    text-align: center;
}

.banner-detail-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.625rem 1.25rem;
    background: var(--color-primary);
    color: white;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: var(--radius-full);
    transition: all 0.2s ease;
}

.banner-detail-link:hover {
    background: var(--color-primary-dark);
    transform: translateY(-1px);
}

/* Mobile */
@media (max-width: 480px) {
    .banner-detail-content {
        width: 95%;
        max-height: 75vh;
    }
    
    .banner-detail-header {
        padding: 1rem 1.25rem;
    }
    
    .banner-detail-body {
        padding: 0.875rem 1.25rem;
    }
    
    .banner-perturbation-item {
        padding: 0.875rem;
    }
}

/* =========================================
 * VUE CARTE (PLEIN ÉCRAN)
 * ========================================= */
#map-container {
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
    min-height: 0;
    height: 100%;
    background: var(--bg-light);
    position: relative; /* Ancre les boutons flottants (Filtrer desktop) */
}

#map-view {
    display: flex;
    flex-direction: column;
    flex: 1; 
    min-height: 0;
    position: relative;
}

#map {
    flex: 1;
    min-height: 0;
    position: relative;
    z-index: 1; 
    background: #f0f0f0;
    touch-action: pan-x pan-y;
    -ms-touch-action: pan-x pan-y;
}

/* =========================================
 * V156: TOP-BAR CARTE - DESIGN UNIFIÉ
 * Tous les éléments ont le même style pill
 * ========================================= */
#top-bar {
    background: transparent;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
    z-index: 10;
}

/* V135: Bouton Filtrer visible (desktop = badge en haut à droite, mobile = FAB) */
#btn-toggle-filter {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    border-radius: var(--radius-full);
    background: var(--primary);
    color: #fff;
    border: none;
    font-weight: 700;
    box-shadow: var(--shadow-md);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#map-container #btn-toggle-filter svg {
    width: 20px;
    height: 20px;
}

#map-container #btn-toggle-filter:hover,
.map-fab-button:hover {
    transform: scale(1.02);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}

#map-container #btn-toggle-filter:active,
.map-fab-button:active {
    transform: scale(0.97);
}

/* Desktop : badge fixe en haut à droite - V156: Décalé pour ne pas chevaucher status-info */
@media (min-width: 769px) {
    #map-container #btn-toggle-filter {
        position: absolute;
        top: 60px;
        right: 16px;
        width: auto;
        height: 36px;
        border-radius: 20px;
        padding: 0 16px;
        z-index: 1200;
        font-size: 13px;
        font-weight: 600;
    }
    #map-container #btn-toggle-filter span { display: inline; }
}

/* Mobile : FAB ronde en bas à droite */
@media (max-width: 768px) {
    #map-container #btn-toggle-filter,
    .map-fab-button {
        position: fixed !important;
        bottom: calc(30px + env(safe-area-inset-bottom));
        right: 20px !important;
        left: auto !important;
        width: 56px;
        height: 56px;
        border-radius: 50%;
        background: #22c55e !important; /* Vert primaire forcé */
        color: white !important;
        border: none;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        z-index: 1200;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0;
        cursor: pointer;
    }
    #map-container #btn-toggle-filter svg {
        width: 24px;
        height: 24px;
    }
    #map-container #btn-toggle-filter span { display: none; }
}

#map-container #btn-back-to-dashboard-from-map {
    padding-left: 0.75rem;
    padding-right: 1.25rem;
}
#map-container #btn-back-to-dashboard-from-map svg {
    margin-right: 0.25rem;
}

/* Groupe d'actions côté droit (status + toggle thème) */
#top-right-controls {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

.map-theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 12px;
    background: rgba(255, 255, 255, 0.95);
    border: none;
    border-radius: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.04);
    font-weight: 700;
    color: #1a1a2e;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    pointer-events: auto;
}

.map-theme-toggle .theme-toggle-icon {
    font-size: 16px;
    line-height: 1;
}

.map-theme-toggle .theme-toggle-label {
    font-size: 13px;
}

.map-theme-toggle:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.05);
}

.map-theme-toggle:active {
    transform: translateY(0);
}

body.dark-theme .map-theme-toggle {
    background: rgba(20, 25, 38, 0.95);
    color: #e2e8f0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.06);
}

body.dark-theme .map-theme-toggle:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.08);
}

/* Style unifié pour tous les éléments - même hauteur, même style pill */
.topbar-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 14px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    color: #1a1a2e;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.04);
    transition: all 0.2s ease;
}

.topbar-pill svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Bouton Retour */
#btn-back-to-dashboard-from-map {
    background: rgba(255, 255, 255, 0.95) !important;
    border: none !important;
    color: #1a1a2e !important;
    cursor: pointer;
}

#btn-back-to-dashboard-from-map:hover {
    background: rgba(255, 255, 255, 1) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.05);
}

#btn-back-to-dashboard-from-map svg {
    color: #22c55e;
}

/* Horloge */
#clock {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 14px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    color: #1a1a2e;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.04);
    font-variant-numeric: tabular-nums;
}

#clock svg {
    width: 15px;
    height: 15px;
    opacity: 0.6;
    color: #64748b;
}

#current-time {
    color: #1a1a2e;
}

#date-indicator {
    color: #64748b;
    font-weight: 500;
    padding-left: 8px;
    border-left: 1px solid rgba(0, 0, 0, 0.1);
}

/* Status Info (bus count) */
#status-info {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 14px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.04);
    margin-left: auto;
}

#bus-count {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #22c55e;
    font-weight: 700;
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
}

#bus-count svg {
    width: 8px;
    height: 8px;
}

#data-status {
    color: #64748b;
    font-weight: 500;
    padding-left: 8px;
    border-left: 1px solid rgba(0, 0, 0, 0.1);
}

#data-status.loaded { color: #22c55e; }
#data-status.error { color: #ef4444; }

#route-filter-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 340px;
    max-height: 100vh;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-left: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    z-index: 1500;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease-in-out;
    transform: translateX(0); 
}
#route-filter-panel.hidden {
    transform: translateX(100%); 
}
.panel-handle { 
    display: none; 
    cursor: pointer;
} 

/* V133: Assurer que le top-bar reste visible sur PC (écrans > 768px) */
@media (min-width: 769px) {
    body.view-map-locked #top-bar {
        position: relative;
        z-index: 1000;
        flex-shrink: 0;
    }

    /* V156: Top-bar desktop - layout horizontal avec pills unifiées */
    #map-view #top-bar {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        padding: 14px 16px;
        display: flex;
        align-items: center;
        gap: 10px;
        pointer-events: none;
    }
    
    #map-view #top-bar > * {
        pointer-events: auto;
    }
    
    /* Tous les éléments gardent le même style pill défini globalement */
}

/* =========================================
 * DESIGN MOBILE (VUE CARTE & SOUS-PAGES)
 * ========================================= */
@media (max-width: 768px) {
    
    .main-nav-buttons-condensed {
        grid-template-columns: 1fr;
        gap: 1rem;
        padding-bottom: 80px; /* Ajout d'espace pour le footer */
    }
    .content-cards {
        grid-template-columns: 1fr;
    }
    .bottom-grid {
        grid-template-columns: 1fr;
    }
    
    /* V48: Règle simplifiée */
    #dashboard-content-view.view-is-active {
        padding-top: 0; 
    }
    #btn-back-to-hall {
        margin-bottom: 1rem; 
    }
    .content-cards {
        gap: 1rem; 
    }
    #info-trafic .tab-content {
        max-height: none;
        overflow-y: visible;
    }
    
    /* V84: Bandeau d'alerte mobile - compact et bien intégré */
    #alert-banner {
        padding: 0.5rem 0.75rem;
        font-size: 0.8rem;
    }
    #alert-banner-content {
        gap: 0.4rem;
    }
    #alert-banner-content svg {
        width: 16px;
        height: 16px;
    }
    #alert-banner-close {
        padding: 0.2rem 0.4rem;
        font-size: 1.1rem;
    }


    /* --- VUE CARTE MOBILE --- */
    
    /* V64: Correction top-bar mobile - ne pas utiliser display:contents qui peut casser le layout */
    #map-view #top-bar {
        background: transparent;
        border: none;
        padding: 0;
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        pointer-events: none;
    }
    
    /* V156: Éléments top-bar mobile - pills fixes positionnées */
    #map-container #map-view #top-bar > #btn-back-to-dashboard-from-map,
    #map-container #map-view #top-bar > #clock,
    #map-container #map-view #top-bar > #status-info {
        position: fixed !important; 
        z-index: 1000;
        height: 36px;
        padding: 0 12px;
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border-radius: 18px;
        font-size: 13px;
        font-weight: 600;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.04);
        pointer-events: auto;
        border: none;
    }
    
    /* Bouton Retour - gauche */
    #map-container #map-view #top-bar > #btn-back-to-dashboard-from-map {
        top: calc(12px + env(safe-area-inset-top));
        left: 12px;
        display: inline-flex !important;
        align-items: center;
        gap: 4px;
        color: #1a1a2e !important;
    }
    #map-container #map-view #top-bar > #btn-back-to-dashboard-from-map span { display: inline; }
    #map-container #map-view #top-bar > #btn-back-to-dashboard-from-map svg { 
        margin-right: 0;
        color: #22c55e;
        width: 14px;
        height: 14px;
    }
    
    /* Horloge - centre */
    #map-container #map-view #top-bar > #clock {
        display: inline-flex !important; 
        align-items: center;
        top: calc(12px + env(safe-area-inset-top));
        left: 50%;
        transform: translateX(-50%);
        gap: 6px;
        color: #1a1a2e;
    }
    #map-container #map-view #top-bar > #clock svg {
        width: 14px;
        height: 14px;
        opacity: 0.5;
    }
    #map-container #map-view #top-bar > #clock #date-indicator { display: none; }
    
    /* Bus count - droite */
    #map-container #map-view #top-bar > #status-info {
        display: inline-flex !important; 
        align-items: center;
        top: calc(12px + env(safe-area-inset-top));
        right: 12px;
        left: auto;
        margin-left: 0;
        gap: 6px;
    }
    #map-container #map-view #top-bar > #status-info #bus-count {
        color: #22c55e;
    }
    #map-container #map-view #top-bar > #status-info #data-status { display: none; }

    /* Groupe droite : status + toggle thème (compact mobile) */
    #top-right-controls {
        position: fixed;
        top: calc(12px + env(safe-area-inset-top));
        right: 12px;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        pointer-events: auto;
        z-index: 1000;
    }

    #top-right-controls #status-info {
        position: relative;
        top: 0;
        right: 0;
        height: 36px;
        padding: 0 12px;
        margin-left: 0;
        gap: 6px;
    }

    #top-right-controls #status-info #data-status { display: none; }

    #top-right-controls .map-theme-toggle {
        width: 38px;
        height: 38px;
        padding: 0;
        border-radius: 50%;
        justify-content: center;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.04);
    }

    #top-right-controls .map-theme-toggle .theme-toggle-label {
        display: none;
    }
    
    /* V76: Le bouton filtrer est maintenant en dehors du top-bar, styles définis globalement */
    
    /* V156: Dark theme mobile - top bar pills */
    body.dark-theme #map-container #map-view #top-bar > #btn-back-to-dashboard-from-map,
    body.dark-theme #map-container #map-view #top-bar > #clock,
    body.dark-theme #map-container #map-view #top-bar > #status-info {
        background: rgba(20, 25, 38, 0.95) !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.06) !important;
        color: #e2e8f0;
    }
    
    body.dark-theme #map-container #map-view #top-bar > #btn-back-to-dashboard-from-map {
        color: #e2e8f0 !important;
    }
    
    body.dark-theme #map-container #map-view #top-bar > #status-info #bus-count {
        color: #4ade80 !important;
    }
    
    #route-filter-panel {
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        max-height: 80vh;
        border-left: none;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        transform: translateY(0); 
        /* *** CORRECTION V29 (V27) *** */
        padding-bottom: env(safe-area-inset-bottom);
    }
    #route-filter-panel.hidden { transform: translateY(100%); }
    .panel-handle {
        display: block; 
        width: 40px;
        height: 4px;
        background: var(--border);
        border-radius: var(--radius-full);
        margin: 8px auto;
    }

    /* MOBILE HEADER: fixed at top, small logo left, centered stacked title */
    #main-header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1200;
        height: 56px;
        padding: 0; /* content padding handled by .header-content */
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        border-bottom: 1px solid var(--border);
        display: flex;
        align-items: center;
    }
    .header-content {
        display: flex;
        justify-content: flex-start; /* logo + title aligned to the left */
        align-items: center;
        height: 100%;
        width: 100%;
        max-width: 1300px;
        margin: 0 auto;
        padding: 0 1rem;
        gap: 0.75rem; /* espace entre logo et titre */
    }
    /* LOGO on the left (static flow) */
    .logo {
        position: static;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        order: 1; /* logo first */
        font-size: 1rem;
        font-weight: 800;
    }
    .header-logo-img {
        height: 38px;
        width: auto;
        object-fit: contain;
    }
    .header-title-group {
        display: flex;
        flex-direction: column;
        align-items: flex-start; /* title aligned left */
        text-align: left;
        line-height: 1.1;
        order: 2; /* title after logo */
    }
    .header-nav {
        order: 3;
        margin-left: auto;
    }
    .brand-name {
        font-size: 1.15rem;
        margin: 0;
        display: block;
        font-weight: 800;
    }
    .brand-sub {
        font-size: 0.75rem;
        margin-top: 1px;
        display: block;
        color: var(--text-secondary);
        font-weight: 600;
    }

    /* Prevent content from being hidden behind fixed header */
    body {
        padding-top: 56px;
    }

    /* Ensure last result is fully visible above bottom UI (mobile) */
    .results-list-wrapper {
        padding-bottom: calc(120px + env(safe-area-inset-bottom));
    }
    /* Also add a small inner padding on the list itself */
    .results-list {
        padding-bottom: 2rem;
    }
    /* Load more wrapper (itinéraires arrivée pagination) */
    .load-more-wrapper {
        display: flex;
        justify-content: center;
        padding: 1rem 0 1.5rem;
    }
    .load-more-wrapper .btn {
        min-width: 160px;
    }
}

/* V60: Bouton Charger + de départs */
.load-more-departures {
    margin-top: 0.5rem;
    padding: 0.75rem 1rem 1.5rem;
}

.load-more-departures .btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.2rem;
    font-size: 0.85rem;
    border: 2px solid var(--primary);
    color: var(--primary);
    background: transparent;
    border-radius: var(--radius-full);
    font-weight: 600;
    transition: all 0.2s ease;
}

.load-more-departures .btn:hover:not(:disabled) {
    background: var(--primary);
    color: white;
}

.load-more-departures .btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.load-more-departures .btn svg {
    width: 16px;
    height: 16px;
}

/* Spinner pour le chargement */
.spinner-small {
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* V149: Bouton "Générer + de trajets" */
.btn-load-more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: calc(100% - 2rem);
    margin: 1rem;
    padding: 0.75rem 1.25rem;
    font-size: 0.9rem;
    font-weight: 600;
    border: 2px solid var(--primary);
    color: var(--primary);
    background: transparent;
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: all 0.2s ease;
}
.btn-load-more:hover:not(:disabled) {
    background: var(--primary);
    color: white;
}
.btn-load-more:disabled {
    opacity: 0.6;
    cursor: wait;
}
.btn-load-more svg {
    flex-shrink: 0;
}


/* =========================================
 * STYLES COMMUNS
 * ========================================= */

.btn {
    padding: 0.5rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-full); 
    background: var(--bg-main);
    color: var(--text-primary);
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all var(--transition-fast), transform 0.1s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
}
.btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.4s ease, height 0.4s ease;
}
.btn:active::after {
    width: 300px;
    height: 300px;
}
.btn:hover { background: var(--bg-secondary); border-color: var(--secondary); transform: translateY(-1px); }
.btn:active { transform: scale(0.97) translateY(0); }
.btn-primary { background: var(--primary); color: white; border-color: var(--primary); }
.btn-primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3); }
.btn-primary::after { background: rgba(255, 255, 255, 0.2); }
.btn-primary svg { margin-right: 0.25rem; }

/* Override pour le bouton rechercher du planificateur - Vert Teal PériMap */
.planner-block .btn-primary.planner-search-btn,
#planner-submit-btn.btn-primary {
    background: #2a9d8f !important;
    border-color: #2a9d8f !important;
}
.planner-block .btn-primary.planner-search-btn:hover,
#planner-submit-btn.btn-primary:hover {
    background: #238b7e !important;
    border-color: #238b7e !important;
    box-shadow: 0 6px 20px rgba(42, 157, 143, 0.4) !important;
}

.btn-secondary {
    background: var(--bg-secondary);
    border-color: var(--border);
    color: var(--text-primary);
    font-weight: 600;
}
.btn-secondary:hover {
    background: var(--border);
    border-color: var(--secondary);
}

/* NOUVEAU : Bouton icône rond */
.btn-icon-round {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--bg-main);
    color: var(--text-primary);
    cursor: pointer;
    transition: all var(--transition-fast), transform 0.15s ease;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}
.btn-icon-round::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(37, 99, 235, 0.1) 0%, transparent 70%);
    opacity: 0;
    transition: opacity var(--transition-fast);
}
.btn-icon-round:hover {
    background: var(--bg-secondary);
    border-color: var(--primary);
    transform: scale(1.05);
}
.btn-icon-round:hover::before {
    opacity: 1;
}
.btn-icon-round:active {
    transform: scale(0.95);
}


.filter-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    background: var(--bg-secondary); 
}
.filter-header h3 { margin: 0; font-size: 1.125rem; font-weight: 600; }
.btn-close {
    background: var(--bg-secondary);
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    width: 32px;
    height: 32px;
    line-height: 1;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}
.btn-close:hover { background: var(--border); color: var(--text-primary); }
.filter-actions {
    padding: 1rem 1.5rem;
    display: flex;
    gap: 0.5rem;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    background: var(--bg-secondary); 
}
.btn-small {
    padding: 0.375rem 0.875rem;
    border: 1px solid var(--border);
    background: var(--bg-main);
    color: var(--text-primary);
    cursor: pointer;
    font-size: 0.8125rem;
    font-weight: 500;
    transition: all 0.15s ease;
    border-radius: var(--radius-full); 
}
.btn-small:hover { background: var(--primary); color: white; border-color: var(--primary); }

.route-list {
    overflow-y: auto;
    flex: 1;
    background: transparent;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}
.category-header {
    padding: 0.75rem 1.25rem;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
}
.category-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
}
.category-title strong { color: var(--text-primary); }
.category-count { color: var(--text-secondary); font-size: 0.75rem; font-weight: 400; }
.category-actions { display: flex; gap: 0.375rem; }
.btn-category-action {
    padding: 0.25rem 0.625rem;
    border: 1px solid var(--border);
    background: var(--bg-main);
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 500;
    transition: all 0.15s ease;
    border-radius: var(--radius-md); 
}
.btn-category-action:hover { background: var(--primary); color: white; border-color: var(--primary); }

.category-routes { background: transparent; } 

.route-checkbox-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 1.25rem;
    cursor: pointer;
    transition: all 0.15s ease;
    border-bottom: 1px solid var(--border);
}
.route-checkbox-item:last-child { border-bottom: none; }
.route-checkbox-item:hover { background: rgba(0,0,0,0.05); } 

.route-checkbox-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--primary);
    flex-shrink: 0;
}
.route-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 45px;
    padding: 0.375rem 0.625rem;
    font-weight: 600;
    font-size: 0.875rem;
    color: white;
    border-radius: var(--radius-md); 
    flex-shrink: 0;
}
.route-name {
    flex: 1;
    font-size: 0.875rem;
    line-height: 1.4;
}

.instruction-content {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 2rem;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    max-width: 500px;
    width: 100%;
}
.instruction-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}
.instruction-header svg { color: var(--primary); }
.instruction-header h3 { margin: 0; font-size: 1.125rem; }
#instructions ol { margin-left: 1.5rem; line-height: 1.8; }
#instructions code {
    background: var(--bg-secondary);
    padding: 0.2rem 0.5rem;
    font-family: 'Courier New', monospace;
    color: var(--primary);
    font-size: 0.8125rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm); 
}
#close-instructions {
    margin-top: 1.5rem;
    width: 100%;
    padding: 0.75rem 1.25rem;
    background: var(--primary);
    color: white;
    border: none;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: var(--radius-md); 
}
#close-instructions:hover { background: var(--primary-dark); }

#install-tip {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
    padding: 1.5rem;
}
body.install-tip-open { overflow: hidden; }
.install-tip.hidden { display: none; }
.install-tip-card {
    width: min(560px, 100%);
    background: #fff;
    border-radius: 24px;
    box-shadow: var(--shadow-2xl);
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
body.dark-theme .install-tip-card {
    background: rgba(15, 23, 42, 0.95);
    color: var(--text-primary);
}
.install-tip-header {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.install-tip-badge {
    margin: 0;
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--primary);
    font-weight: 600;
}
.install-tip-header h3 {
    margin: 0;
    font-size: 1.5rem;
}
.install-tip-lede {
    margin: 0;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-secondary);
}
.install-tip-steps {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}
.install-tip-steps section {
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    padding: 1rem 1.25rem;
    border: 1px solid var(--border);
}
body.dark-theme .install-tip-steps section {
    background: rgba(255, 255, 255, 0.04);
}
.install-tip-steps h4 {
    margin: 0 0 0.75rem;
    font-size: 1rem;
}
.install-tip-steps ol {
    margin: 0;
    padding-left: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    font-size: 0.9375rem;
    line-height: 1.5;
}
.install-tip-steps strong { font-weight: 600; }
#install-tip-close {
    align-self: flex-end;
    min-width: 180px;
}

@media (max-width: 640px) {
    .install-tip-steps {
        grid-template-columns: 1fr;
    }
    #install-tip {
        padding: 1rem;
    }
}

/* =========================================
 * CORRECTION D'EMPILEMENT GLOBAL (Empêche le menu d'être coupé)
 * ========================================= */

/* On force la section du haut (Hero) à être AU-DESSUS de la section du bas */
.hero-section {
    position: relative;
    z-index: 20; /* Plus haut que le contenu en dessous */
}

/* On force la section du bas à être EN-DESSOUS */
.bottom-content-wrapper {
    position: relative;
    z-index: 10; 
}

/* On s'assure que rien ne coupe le contenu qui dépasse */
.hero-section, 
.planner-block-wrapper, 
.planner-block, 
.planner-form {
    overflow: visible !important;
}

/* =========================================
 * STYLES LEAFLET
 * ========================================= */

/* *** V49 - FIX BUG ANIMATION POPUP: Transition supprimée ici *** */
.leaflet-marker-pane > *,
.leaflet-popup-pane > * {
    transition: none !important; /* V49: Supprime l'animation de 1000ms */
}


.leaflet-popup-content-wrapper {
    border-radius: var(--radius-lg); 
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}
.leaflet-popup-content { 
    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; 
    margin: 0;
    min-width: 260px;
    background: transparent; 
}

.bus-icon-rect {
    background: transparent !important;
    border: none !important;
    width: 32px !important;
    height: 32px !important;
}
.bus-icon-rect div {
    transition: all 0.2s ease;
    border: 2px solid white;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50% !important; /* Cercle parfait */
    font-weight: 700;
    font-size: 11px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    box-sizing: border-box;
}
.bus-icon-rect:hover div {
    transform: scale(1.15);
}
.bus-icon-waiting div {
    opacity: 0.6;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2) !important;
}

.bus-status-perturbation div {
    border: 3px solid var(--color-orange) !important;
}
.bus-status-retard div {
    border: 3px solid var(--color-yellow) !important;
}
.bus-status-annulation div {
    opacity: 0.3 !important;
    border: 3px solid var(--color-red) !important;
}

.marker-cluster-small { background-color: rgba(181, 226, 140, 0.6); }
.marker-cluster-small div { background-color: rgba(110, 204, 57, 0.6); }
.marker-cluster-medium { background-color: rgba(241, 211, 87, 0.6); }
.marker-cluster-medium div { background-color: rgba(240, 194, 12, 0.6); }
.marker-cluster-large { background-color: rgba(253, 156, 115, 0.6); }
.marker-cluster-large div { background-color: rgba(241, 128, 23, 0.6); }
.marker-cluster { background-clip: padding-box; border-radius: 50%; }
.marker-cluster div { width: 30px; height: 30px; margin-left: 5px; margin-top: 5px; text-align: center; border-radius: 50%; font: 12px "Helvetica Neue", Arial, Helvetica, sans-serif; }
.marker-cluster span { line-height: 30px; }

.stop-marker-icon {
    background: var(--secondary);
    border: 2px solid white;
    border-radius: 50%;
    box-shadow: var(--shadow-md);
    transition: all 0.2s ease;
    cursor: pointer;
}
.leaflet-zoom-animated .stop-marker-icon {
    transition: opacity 0.3s, transform 0.3s;
}
.stop-marker-icon:hover {
    background: var(--primary);
    transform: scale(1.3);
}
.stop-search-marker div {
    background: var(--primary);
    border: 2px solid white;
    border-radius: 50%;
    box-shadow: var(--shadow-md);
    width: 100%;
    height: 100%;
}

/* NOUVEAU: pastilles d'arrêt sur les tracés */
.itinerary-stop-marker {
    border-radius: 50% !important;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    background: transparent !important;
    border: none !important;
}
.itinerary-stop-marker span {
    display: block;
    border-radius: 50% !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

/* Début du trajet - Rond vert avec bordure blanche */
.itinerary-stop-marker.boarding span {
    width: 22px !important;
    height: 22px !important;
    background: #4CAF50;
    border: 3px solid #fff;
}

/* Fin du trajet - Rond rouge avec bordure blanche */
.itinerary-stop-marker.alighting span {
    width: 22px !important;
    height: 22px !important;
    background: #f44336;
    border: 3px solid #fff;
}

/* Correspondance - Rond jaune/orange */
.itinerary-stop-marker.transfer span {
    width: 16px !important;
    height: 16px !important;
    background: #FFC107;
    border: 3px solid #fff;
}

/* Arrêts intermédiaires - Petits ronds blancs avec bordure grise */
.itinerary-stop-marker.intermediate span {
    width: 12px !important;
    height: 12px !important;
    background: #ffffff;
    border: 2px solid #9e9e9e;
}

/* ✅ V57: NOUVEAU - Marqueur de position utilisateur */
.user-location-marker {
    background-color: #4a8cf7;
    border: 2px solid white;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    box-shadow: 0 0 5px rgba(0,0,0,0.5);
}
.user-location-marker::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #4a8cf7;
    margin-top: -20px;
    margin-left: -20px;
    opacity: 0.3;
    animation: pulse 2s infinite;
    pointer-events: none;
}
@keyframes pulse {
    0% {
        transform: scale(0.5);
        opacity: 0.4;
    }
    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

/* ✅ V57: NOUVEAU - Bouton "Ma Position" sur les cartes */
.leaflet-control-locate {
    background-color: white;
    width: 34px;
    height: 34px;
    border: 1px solid var(--border);
    border-radius: 50%;
    box-shadow: var(--shadow-md);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.leaflet-control-locate:hover {
    background-color: var(--bg-secondary);
}
.leaflet-control-locate svg {
    width: 18px;
    height: 18px;
    color: var(--text-primary);
}
.leaflet-control-locate.following svg {
    color: var(--primary);
}

.bus-icon-rect svg {
    width: 18px;
    height: 18px;
    display: block;
}


.info-popup-content {
    width: 100%;
    max-height: 250px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}
.info-popup-header {
    background: var(--bg-secondary);
    padding: 0.875rem 1.25rem;
    font-size: 1rem;
    font-weight: 600;
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
}
.info-popup-body {
    padding: 0.5rem;
}
.info-popup-body.bus-details {
    padding: 0 0.875rem 0.625rem;
}
.info-popup-body p {
    margin: 0.5rem 0; 
    font-size: 0.875rem; 
}
.info-popup-body p strong {
    font-weight: 600;
}
.info-popup-body .realtime-notice {
    margin: 0.625rem 0 0 0; 
    font-size: 0.75rem; 
    color: var(--text-secondary);
}
.departure-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.625rem 0.75rem;
    border-bottom: 1px solid var(--border);
    transition: background var(--transition-fast), transform var(--transition-fast);
}
.departure-item:hover {
    background: var(--bg-secondary);
}
.departure-item:last-child {
    border-bottom: none;
}
.departure-item.empty {
    color: var(--text-secondary);
    font-style: italic;
    font-size: 0.875rem;
    justify-content: center;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;
}

.departure-info {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    overflow: hidden; 
    flex: 1;
}
.departure-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    padding: 0.25rem 0.5rem;
    font-weight: 700;
    font-size: 0.8125rem;
    color: white;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.departure-dest {
    font-size: 0.875rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.departure-time {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
    margin-left: 0.5rem;
}
.departure-time strong {
    font-size: 0.95rem;
    font-weight: 600;
}
.wait-time {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-secondary);
}
.wait-time.imminent {
    color: #059669; 
    font-weight: 600;
}

/* =========================================
 * POPUP ARRÊT V105 - Style SNCF Connect
 * ========================================= */
.stop-schedule-popup .leaflet-popup-content-wrapper {
    background: var(--bg-primary) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25) !important;
    border: 1px solid var(--border) !important;
    overflow: hidden;
}
.stop-schedule-popup .leaflet-popup-tip {
    background: var(--bg-primary) !important;
    border: 1px solid var(--border) !important;
    border-top: none !important;
    border-left: none !important;
}
.stop-schedule-popup .leaflet-popup-content {
    margin: 0;
    min-width: 280px;
    max-width: 380px;
    max-height: 400px;
    overflow-y: auto;
}
.stop-schedule-popup .leaflet-popup-close-button {
    color: var(--text-secondary) !important;
    font-size: 20px !important;
    top: 8px !important;
    right: 10px !important;
    z-index: 10;
}
.stop-schedule-popup .leaflet-popup-close-button:hover {
    color: var(--text-primary) !important;
}

/* Scrollbar unique sur le content */
.stop-schedule-popup .leaflet-popup-content::-webkit-scrollbar {
    width: 6px;
}
.stop-schedule-popup .leaflet-popup-content::-webkit-scrollbar-track {
    background: transparent;
}
.stop-schedule-popup .leaflet-popup-content::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 3px;
}
.stop-schedule-popup .leaflet-popup-content::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary);
}

/* Structure V105 */
.stop-popup-v105 {
    color: var(--text-primary);
}

/* Notice en haut */
.stop-popup-v105 .popup-notice {
    padding: 0.75rem 1rem;
    background: rgba(99, 102, 241, 0.1);
    color: var(--primary-color);
    font-size: 0.75rem;
    line-height: 1.4;
    border-bottom: 1px solid var(--border);
}

/* Bloc par ligne */
.stop-popup-v105 .popup-line-block {
    border-bottom: 1px solid var(--border);
}
.stop-popup-v105 .popup-line-block:last-child {
    border-bottom: none;
}

/* Header ligne : badge + nom arrêt */
.stop-popup-v105 .popup-line-header {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.875rem 1rem;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
}
.stop-popup-v105 .popup-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 22px;
    padding: 0 0.5rem;
    font-size: 0.8125rem;
    font-weight: 700;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}
.stop-popup-v105 .popup-stop-name {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
}

/* Destination row */
.stop-popup-v105 .popup-dest-row {
    padding: 0.75rem 1rem 0.75rem 1rem;
    border-bottom: 1px solid var(--border-light, rgba(128,128,128,0.1));
}
.stop-popup-v105 .popup-dest-row:last-child {
    border-bottom: none;
}
.stop-popup-v105 .popup-dest-name {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

/* Horaires */
.stop-popup-v105 .popup-times {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}
.stop-popup-v105 .popup-time {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

/* Empty state */
.stop-popup-v105 .popup-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 2.5rem 1.5rem;
    color: var(--text-secondary);
    font-size: 0.875rem;
}
.stop-popup-v105 .popup-empty-icon {
    font-size: 2rem;
}

/* V106: Destinations cliquables */
.stop-popup-v105 .popup-dest-clickable {
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.1s ease;
    border-radius: 6px;
    padding: 0.25rem 0.5rem;
    margin: -0.25rem -0.5rem;
}
.stop-popup-v105 .popup-dest-clickable:hover {
    background: var(--bg-tertiary, rgba(0,0,0,0.05));
}
.stop-popup-v105 .popup-dest-clickable:active {
    transform: scale(0.98);
}
.stop-popup-v105 .popup-dest-clickable .dest-arrow {
    font-size: 0.75rem;
    opacity: 0;
    transition: opacity 0.15s ease, transform 0.15s ease;
    color: var(--primary, #10b981);
    margin-left: 0.5rem;
}
.stop-popup-v105 .popup-dest-clickable:hover .dest-arrow {
    opacity: 1;
    transform: translateX(2px);
}


/* =========================================
 * STYLES PLANIFICATEUR (GÉNÉRAL)
 * ========================================= */ */
.planner-block .form-group label,
.itinerary-edit-form .form-group label {
    font-size: 0.75rem; 
    font-weight: 700; 
    color: var(--text-secondary); 
    text-transform: uppercase; 
    margin-bottom: 0.375rem;
}

/* Champs avec icône intégrée */
.input-with-icon {
    position: relative;
}
.input-with-icon .input-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    z-index: 1;
    pointer-events: none;
}
.input-with-icon input[type="text"] {
    padding-left: 3rem;
}

/* Champs du planner avec fond gris clair */
.planner-block .form-group input[type="text"] {
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    color: #1f2937;
    font-size: 0.95rem;
}
.planner-block .form-group input[type="text"]::placeholder {
    color: #9ca3af;
}
.planner-block .form-group input[type="text"]:focus {
    background: #ffffff;
    border-color: #10b981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
}

.form-group.has-geolocate {
    position: relative;
}
.btn-geolocate {
    position: absolute;
    top: 50%;
    right: 0.75rem;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #ffffff;
    color: #10b981;
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    z-index: 5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: all var(--transition-fast);
}
.btn-geolocate:hover:not(:disabled) {
    background: #ecfdf5;
    color: #059669;
    border-color: #10b981;
}
.btn-geolocate:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    box-shadow: none;
}
.btn-geolocate svg {
    width: 16px;
    height: 16px;
}

@media (min-width: 901px) {
    #itinerary-results-container .form-group.has-geolocate .btn-geolocate {
        transform: translateY(-50%) !important;
    }
}

/* ✅ V57: NOUVEAU - Spinner pour le bouton géoloc */
.btn-geolocate .spinner {
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}


.btn-swap-direction {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #6b7280;
    flex-shrink: 0;
    margin: 0;
    align-self: center;
    position: relative;
    z-index: 10;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    transition: all 0.25s ease;
}
.btn-swap-direction:hover {
    background: #ecfdf5;
    color: #10b981;
    border-color: #10b981;
    transform: rotate(180deg);
}

/* =========================================
 * CORRECTIF Z-INDEX (PLACEZ CECI AVANT .btn-when)
 * ========================================= */

.form-group-when {
    position: relative; 
    flex-shrink: 0;
    margin-bottom: 0; 
    /* C'est ICI la correction magique : on force ce bloc à être au-dessus 
       du bouton "Rechercher" qui le suit dans le HTML */
    z-index: 50; 
}

/* ... Le reste de vos styles (.btn-when, etc.) ... */
.btn-when {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: auto; 
    padding: 0.75rem 1rem;
    border: 1px solid #e5e7eb;
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    font-family: inherit;
    background: #f3f4f6;
    cursor: pointer;
    text-align: left;
    color: #1f2937;
}
.btn-when > svg:first-child {
    color: #10b981;
    flex-shrink: 0;
}
.btn-when > span {
    flex: 1;
}
.btn-when:hover {
    border-color: #10b981;
    background: #ffffff;
}
.btn-when > svg:last-child {
    color: #9ca3af;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}
.btn-when.popover-active > svg:last-child {
    transform: rotate(180deg);
}

/* Style pour le bouton "Quand" dans le formulaire des résultats */
.btn-when-inline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    font-family: inherit;
    background: var(--bg-main);
    cursor: pointer;
    text-align: left;
    color: var(--text-primary);
}
.btn-when-inline:hover {
    border-color: var(--primary);
}
.btn-when-inline svg {
    color: var(--text-secondary);
    transition: transform 0.2s ease;
}
.btn-when-inline.popover-active svg {
    transform: rotate(180deg);
}


#planner-options-popover, #results-planner-options-popover {
    position: absolute;
    top: calc(100% + 8px); 
    right: 0; 
    width: 320px; 
    background: var(--bg-main);
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    z-index: 1100;
    overflow: visible;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
#planner-options-popover.hidden, #results-planner-options-popover.hidden {
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
}
/* Positionnement spécifique pour le popover des résultats */
#results-planner-options-popover {
    left: 0;
    right: 0;
    width: auto;
}


.popover-tabs {
    display: flex;
    background: var(--bg-secondary);
}
.popover-tab {
    flex: 1;
    padding: 0.875rem 1rem;
    border: none;
    background: transparent;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: all 0.2s ease;
}
.popover-tab:hover {
    color: var(--text-primary);
}
.popover-tab.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}

.popover-content {
    padding: 1rem;
}
#planner-options-popover > .popover-content,
#results-planner-options-popover > .popover-content {
    overflow: visible;
    max-height: none;
}
.popover-time-inputs {
    display: flex;
    gap: 1rem;
    align-items: stretch;
}
.popover-time-inputs .form-group {
    flex: 1;
    min-width: 0;
}
.popover-time-inputs .form-group label {
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 0.35rem;
    color: var(--text-secondary);
}
.popover-time-inputs .real-select {
    text-align: center;
    font-weight: 600;
    letter-spacing: 0.03em;
    font-variant-numeric: tabular-nums;
    padding-left: 1.5rem;
    padding-right: 2.75rem;
    background-position: calc(100% - 0.75rem) center;
}

.real-select {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    font-family: inherit;
    transition: all 0.15s ease;
    color: var(--text-primary);
    background-color: var(--bg-secondary);
    appearance: none;
    -webkit-appearance: none;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%23666" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>');
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 12px;
    cursor: pointer;
    padding-right: 2.5rem;
}
.real-select option {
    color: var(--text-primary);
    background-color: var(--bg-main);
}
body.dark-theme .real-select option {
    background-color: #0f1724;
    color: var(--text-primary);
}
.real-select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
    outline: none;
}

.time-select-wrapper {
    position: relative;
    width: 100%;
}
.time-select-native {
    position: absolute;
    inset: 0;
    width: 0;
    height: 0;
    opacity: 0;
    pointer-events: none;
}
.time-select-display {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    font-size: 0.95rem;
    font-weight: 600;
    background: var(--bg-main);
    color: var(--text-primary);
    cursor: pointer;
    text-align: center;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
    position: relative;
}
.time-select-display::after {
    content: '';
    position: absolute;
    right: 1rem;
    top: 50%;
    width: 0.65rem;
    height: 0.35rem;
    border-left: 2px solid var(--text-secondary);
    border-bottom: 2px solid var(--text-secondary);
    transform: translateY(-60%) rotate(-45deg);
    transition: transform 0.2s ease;
}
.time-select-wrapper.is-open .time-select-display {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}
.time-select-wrapper.is-open .time-select-display::after {
    transform: translateY(-40%) rotate(135deg);
}

/* V160: Menu temps qui s'ouvre vers le HAUT pour éviter de sortir de l'écran */
.time-select-menu {
    position: absolute;
    left: 0;
    right: auto;
    bottom: calc(100% + 8px); /* S'ouvre vers le haut */
    top: auto;
    background: var(--bg-main);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15), 0 -2px 8px rgba(0, 0, 0, 0.1);
    padding: 8px 0;
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity 0.15s ease, transform 0.15s ease;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    width: 100px;
    max-height: min(320px, 50vh); /* Taille raisonnable */
    overflow-y: auto;
    scrollbar-width: thin;
}

.time-select-wrapper-minute .time-select-menu,
.time-select-wrapper-hour .time-select-menu {
    border-radius: 12px;
}
.time-select-menu::-webkit-scrollbar {
    width: 6px;
}
.time-select-menu::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.25);
    border-radius: 999px;
}
.time-select-wrapper.is-open .time-select-menu {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}
.time-select-option {
    width: 100%;
    padding: 10px 16px;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 15px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: background 0.1s ease;
    text-align: center;
    border-radius: 0;
}
.time-select-option:hover,
.time-select-option:focus {
    background: var(--bg-secondary);
    color: var(--primary);
}
.time-select-option.is-active {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
    font-weight: 700;
}
.time-select-option[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
}

/* V160: Mobile - menu temps optimisé */
@media (max-width: 640px) {
    .time-select-menu {
        width: 90px;
        max-height: min(280px, 45vh);
        padding: 6px 0;
        border-radius: 10px;
    }
    .time-select-option {
        padding: 10px 12px;
        font-size: 14px;
    }
}

.btn-popover-submit {
    width: 100%;
    margin-top: 1rem;
    padding: 0.75rem;
    justify-content: center;
}

.autocomplete-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg-main);
    border: 1px solid var(--border);
    border-top: none;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    box-shadow: var(--shadow-md);
    z-index: 1000;
    max-height: 250px;
    overflow-y: auto;
    display: none;
    animation: fadeInDown 0.2s ease-out;
}

.suggestion-item {
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
    cursor: pointer;
    border-bottom: 1px solid var(--border);
    transition: all var(--transition-fast);
    position: relative;
}
.suggestion-item:last-child {
    border-bottom: none;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
}
.suggestion-item:hover {
    background: var(--bg-secondary);
    padding-left: 1.25rem;
}
.suggestion-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--primary);
    transform: scaleY(0);
    transition: transform var(--transition-fast);
}
.suggestion-item:hover::before {
    transform: scaleY(1);
}
.suggestion-item strong {
    font-weight: 700;
    color: var(--text-primary);
}


@media (max-width: 900px) { 
    /* 1. On nettoie le layout du formulaire */
    .planner-form {
        flex-direction: column;
        align-items: stretch;
        /* Isolation pour éviter les mélanges bizarres */
        isolation: isolate; 
    }
    .planner-inputs {
        display: flex;
        flex-direction: column;
        gap: 1rem; 
        align-items: stretch;
        width: 100%;
    }
    .planner-inputs .form-group,
    .form-group-when {
        width: 100%;
    }
    .planner-inputs .swap-button-slot,
    .results-planner-inputs .swap-button-slot {
        order: 2;
        width: 100%;
        display: flex;
        justify-content: center;
    }
    .planner-inputs .swap-button-slot .btn-swap-direction,
    .results-planner-inputs .swap-button-slot .btn-swap-direction {
        display: inline-flex;
        margin: 0 auto;
        width: 44px;
        height: 44px;
    }
    .btn-when { width: 100%; }

    /* 2. LE PARENT DU MENU (L'Ancre) */
    .form-group-when {
        position: relative; 
        margin-bottom: 0;
        /* CRUCIAL : Il doit être devant le bouton Rechercher */
        z-index: 500; 
    }

    /* 3. LE MENU LUI-MÊME */
    #planner-options-popover {
        /* Position absolue par rapport à .form-group-when */
        position: absolute !important; 
        top: calc(100% + 10px); /* Juste sous le bouton */
        left: 0;
        width: 100%;
        
        /* Design */
        max-height: none;
        overflow: visible;
        background: var(--bg-main);
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        box-shadow: 0 10px 40px rgba(0,0,0,0.3); /* Grosse ombre */
        
        /* CRUCIAL : Z-Index très haut pour flotter */
        z-index: 1000;
        
        /* S'assurer qu'il est cliquable */
        pointer-events: auto;
    }

    /* 4. Cacher proprement quand c'est fermé */
    #planner-options-popover.hidden {
        display: none !important;
    }

    /* 5. LE BOUTON RECHERCHER */
    .planner-search-btn {
        position: relative;
        /* Z-Index plus bas que le menu */
        z-index: 1; 
        margin-top: 0;
    }

    /* 6. NETTOYAGE : Suppression totale des "écrans gris" (backdrops) */
    #planner-options-popover::before,
    #planner-options-popover:not(.hidden)::before {
        display: none !important;
        content: none !important;
    }

    .results-planner-inputs {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }
    .results-planner-inputs .btn-swap-direction {
        order: 0;
        margin: 0 auto;
    }
}


/* =========================================
 * NOUVELLE VUE : RÉSULTATS D'ITINÉRAIRE
 * ========================================= */

/* Le conteneur principal est maintenant un flex en LIGNE */
#itinerary-results-container {
    display: flex;
    flex-direction: row; /* Panneau à gauche, carte à droite */
    background: var(--bg-light);
    /* V152: Position fixed pour occuper tout l'écran */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100vh;
    z-index: 100;
}

/* NOUVEAU : Panneau latéral (colonne) */
#results-side-panel {
    width: 400px; /* Largeur fixe type IDFM */
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    height: 100%; /* Prend toute la hauteur du conteneur */
    background: var(--bg-main);
    border-right: 1px solid var(--border);
    z-index: 10;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

/* NOUVEAU : Panneau d'édition IDFM */
#itinerary-edit-panel {
    background: var(--bg-main);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    padding: 1rem 1.5rem;
}

/* V66: En-tête itinéraire - visible sur desktop uniquement */
.itinerary-edit-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0 0 0.75rem 0;
}

.itinerary-edit-header h2 {
    font-size: 1.125rem;
    font-weight: 700;
    margin: 0;
    color: var(--text-primary);
}

/* V66: Formulaire harmonisé avec le style du hall */
.itinerary-edit-form {
    padding: 0;
    position: relative;
}

.itinerary-edit-form .form-group {
    margin-bottom: 0.75rem;
}

.itinerary-edit-form .form-group:last-of-type {
    margin-bottom: 1rem;
}

/* V66: Inputs harmonisés avec le style planner-block du hall */
.itinerary-edit-form .form-group input[type="text"],
#results-planner-from,
#results-planner-to {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 0.875rem 1rem;
    font-size: 0.95rem;
    color: var(--text-primary);
    width: 100%;
    transition: all 0.2s ease;
    min-height: 48px;
    box-sizing: border-box;
}

.itinerary-edit-form .form-group input[type="text"]::placeholder {
    color: #94a3b8;
}

.itinerary-edit-form .form-group input[type="text"]:focus,
#results-planner-from:focus,
#results-planner-to:focus {
    background: #ffffff;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
    outline: none;
}

/* V66: Labels plus discrets comme dans le hall */
.itinerary-edit-form .form-group label {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.375rem;
    display: block;
}

/* Dark theme pour les inputs itinéraire */
body.dark-theme .itinerary-edit-form .form-group input[type="text"],
body.dark-theme #results-planner-from,
body.dark-theme #results-planner-to {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
}

body.dark-theme .itinerary-edit-form .form-group input[type="text"]:focus,
body.dark-theme #results-planner-from:focus,
body.dark-theme #results-planner-to:focus {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--primary);
}

/* Bloc d'inputs pour la vue résultats */
.results-planner-inputs {
    --swap-col-width: 56px;
    margin-bottom: 1rem;
}
.results-planner-inputs .form-group {
    margin-bottom: 0;
}

/* Bouton "Lancer la recherche" pleine largeur */
.btn-full-width {
    width: 100%;
    justify-content: center;
    padding: 0.75rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: var(--radius-md);
}

/* NOUVEAU : Onglets de mode de transport */
#results-mode-tabs {
    display: flex;
    justify-content: space-around;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
    padding: 0.5rem 1rem;
    flex-shrink: 0; /* Ne doit pas rétrécir */
}
.mode-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem;
    border: none;
    background: transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    flex: 1;
    border-bottom: 3px solid transparent;
    transition: all 0.2s ease;
}
.mode-tab:hover {
    background: var(--bg-main);
}
.mode-tab.active {
    background: var(--bg-main);
    border-bottom-color: var(--primary);
}
.mode-tab.hidden {
    display: none;
}
.mode-tab svg {
    width: 24px;
    height: 24px;
    color: var(--text-secondary);
    transition: color 0.2s ease;
}
.mode-tab.active svg {
    color: var(--primary);
}
.mode-tab-duration {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
}
.mode-tab-duration.empty {
    color: var(--text-secondary);
    font-weight: 500;
}


/* NOUVEAU : Conteneur pour la liste des résultats */
.results-list-wrapper {
    flex: 1; /* Prend tout l'espace restant dans le panneau latéral */
    overflow: visible;
    overscroll-behavior: auto;
    padding-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
    min-height: 0; /* Important pour le scroll flex */
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: rgba(0, 0, 0, 0.2) transparent; /* Firefox */
}

/* Scrollbar minimaliste (Webkit) */
.results-list-wrapper::-webkit-scrollbar {
    width: 6px;
}
.results-list-wrapper::-webkit-scrollbar-track {
    background: transparent;
}
.results-list-wrapper::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 10px;
}
.results-list-wrapper::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, 0.2);
}

.results-list {
    padding: 1rem;
    flex: 1; /* This is already present in your snippet */
    overflow-y: auto; /* This enables vertical scrolling when content overflows */
    max-height: 500px; /* This sets a maximum height for the element */
}

/* La CARTE prend le reste de l'espace */
#results-map {
    flex: 1; /* Prend tout l'espace restant à droite */
    min-width: 0; /* V151: Permet au flex de fonctionner correctement */
    height: 100%;
    background: #e5e5e5;
    touch-action: pan-x pan-y;
    position: relative; /* V151: Nécessaire pour Leaflet */
    z-index: 1; /* V152: S'assurer que la carte est visible */
}


.results-message {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--text-secondary);
    font-style: italic;
}
.results-message.error {
    color: var(--color-red);
    font-style: normal;
    font-weight: 600;
}

.route-option-wrapper {
    margin-bottom: 1rem;
}
.route-option-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
    padding-left: 0.25rem;
}

/* =========================================
 * NOUVEAU STYLE DE CARTE (V40 - Simplifié)
 * ========================================= */
.route-option {
    display: flex;
    flex-direction: column; /* Mise en page sur 2 lignes */
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    padding: 1rem;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    gap: 0.75rem; /* Espace entre la ligne de bus et le footer */
}
.route-option.is-active,
.route-option:hover {
    border-color: var(--primary);
    background: var(--bg-main);
}

/* --- (1) Ligne des bus --- */
.route-summary-line {
    display: flex;
    align-items: center;
    column-gap: 0.35rem;
    row-gap: 0.4rem;
    flex-wrap: wrap; /* Permet le passage à la ligne */
}
.route-summary-bus-icon {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-secondary);
    border: 1px solid var(--border);
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
    background: var(--bg-main);
    /* NOUVEAU: pour aligner les icônes */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
}
.route-summary-bus-icon svg {
    width: 20px;
    height: 20px;
}

/* V60: Icône de marche dans le résumé */
.route-summary-walk-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    opacity: 0.7;
}
.route-summary-walk-icon svg {
    width: 18px;
    height: 18px;
}

.route-summary-dot {
    color: var(--text-secondary);
    font-weight: 600;
    align-self: center;
}
.route-line-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    font-size: 0.9rem;
    border-radius: 999px;
    width: 46px;
    min-width: 46px;
    height: 32px;
    padding: 0;
    text-align: center;
}

/* --- (2) Footer (Temps + Durée) --- */
.route-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.route-time {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}
.route-duration {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-secondary);
}
.route-duration-eco {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    color: #1e8e3e; /* Vert "éco" */
}
.route-duration-eco svg {
    width: 16px;
    height: 16px;
}

/* *** V63 : Prochains départs groupés *** */
.route-next-departures {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-top: 0.5rem;
    margin-top: 0.5rem;
    border-top: 1px dashed var(--border);
    font-size: 0.8rem;
    color: var(--text-secondary);
    flex-wrap: wrap;
}
.next-departures-label {
    font-weight: 500;
    color: var(--primary);
}
.next-departures-more {
    color: var(--text-secondary);
    font-style: italic;
    opacity: 0.8;
}

/* Dark theme pour prochains départs */
body.dark-theme .route-next-departures {
    border-top-color: rgba(255, 255, 255, 0.1);
}
body.dark-theme .next-departures-label {
    color: var(--primary);
}

/* *** FIN DES NOUVEAUX STYLES (V40) *** */


/* --- Styles pour les détails d'itinéraire (PC - Accordéon) --- */
/* (Ces styles s'appliqueront > 768px) */
.route-details {
    padding: 1rem;
    background: var(--bg-main);
    border: 1px solid var(--border);
    border-top: none;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    margin-top: -0.5rem; /* Chevauche la carte */
    animation: fadeIn 0.3s ease;
}
.route-details.hidden {
    display: none;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* *** NOUVEAU V34 : Styles pour l'accordéon PC *** */
.route-details .step-detail {
    display: flex;
    position: relative;
    padding-left: 3.5rem; /* MODIFIÉ: 3rem -> 3.5rem (plus d'espace) */
    margin-bottom: 1.5rem;
    /* variable --line-color définie inline par JS */
}
.route-details .step-detail:last-child {
    margin-bottom: 0;
}
.route-details .step-detail::before { /* Ligne verticale */
    content: '';
    position: absolute;
    left: 19px; /* Centre de l'icône de 40px */
    top: 24px;
    bottom: -1.5rem;
    width: 4px; /* Augmenté pour la visibilité */
    background: var(--line-color, var(--border));
}
.route-details .step-detail:last-child::before {
    bottom: 12px; /* conserve un trait court sous la dernière icône */
}
/* *** CORRECTION V36 : Utilise text-secondary pour le contraste *** */
.route-details .step-detail.walk::before,
.route-details .step-detail.bicycle::before { /* Ajout vélo */
    background: repeating-linear-gradient(
        var(--text-secondary) 0,
        var(--text-secondary) 4px,
        transparent 4px,
        transparent 8px
    );
}

/* *** NOUVEAU V36 : Point de connexion (cercle) *** */
.route-details .step-detail::after {
    content: '';
    position: absolute;
    left: 14px; /* (40px icon / 2) - ( (12px dot + 2*2px border) / 2 ) */
    top: 4px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--bg-main);
    border: 2px solid var(--line-color, var(--border));
    z-index: 1; /* Derrière l'icône, mais devant la ligne */
}
.route-details .step-detail.walk::after,
.route-details .step-detail.bicycle::after { /* Ajout vélo */
    border-color: var(--text-secondary);
}


.route-details .step-icon {
    position: absolute;
    left: 0;
    top: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--bg-main);
    /* *** CORRECTION V36: Ajout du Z-index *** */
    position: relative; /* z-index a besoin de position */
    z-index: 2;
}
.route-details .step-detail.walk .step-icon,
.route-details .step-detail.bicycle .step-icon { /* Ajout vélo */
    background: var(--bg-secondary);
    color: var(--text-secondary);
}
.route-details .step-icon svg {
    width: 20px;
    height: 20px;
}
.route-details .step-detail.walk .step-icon svg,
.route-details .step-detail.bicycle .step-icon svg {
    color: inherit;
}
.route-details .step-icon .route-line-badge {
    font-size: 1.1rem;
    padding: 0.5rem 0.75rem;
}

.route-details .step-info {
    display: flex;
    flex-direction: column;
    padding-top: 4px; /* Aligner avec l'icône */
}
.route-details .step-instruction {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
}
.route-details .step-duration-inline {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-left: 0.25rem;
}
.route-details .wait-info .wait-time {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-secondary);
}
.route-details .wait-info .wait-duration {
    font-size: 0.9rem;
    color: var(--text-secondary);
}
.route-details .step-sub-instruction {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-top: 0.25rem;
}
.route-details .step-stop-point {
    margin-top: 0.5rem;
    padding-left: 1rem;
    position: relative;
    font-size: 0.875rem;
    color: var(--text-primary);
}
.route-details .step-stop-point::before { /* Puce avant le temps/arrêt */
    content: '';
    position: absolute;
    left: 0;
    top: 0.5em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--border);
}
.route-details .step-stop-point .step-time-detail {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    margin-left: 0.25rem;
}
.route-details .step-stop-point strong {
    font-weight: 700;
}

.route-details .intermediate-stops {
    margin: 0.5rem 0 0.5rem 1rem;
}
.route-details .intermediate-stops summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--primary);
    list-style: none; /* Cache le marqueur par défaut */
    padding: 0.25rem 0;
}
.route-details .intermediate-stops summary::-webkit-details-marker {
    display: none; /* Cache le marqueur sur Chrome/Safari */
}
.route-details .intermediate-stops summary .chevron {
    color: var(--text-secondary);
    transition: transform 0.2s ease;
}
.route-details .intermediate-stops[open] summary .chevron {
    transform: rotate(180deg);
}
.route-details .intermediate-stops-list {
    margin: 0.5rem 0 0 0.5rem;
    padding-left: 1rem;
    border-left: 2px solid var(--line-color, var(--border));
    list-style-type: none;
    font-size: 0.8125rem;
    color: var(--text-secondary);
}
.route-details .intermediate-stops-list li {
    position: relative;
    padding: 0.25rem 0 0.25rem 0.75rem;
}
.route-details .intermediate-stops-list li::before { /* Puce pour la liste d'arrêts */
    content: '';
    position: absolute;
    left: -1rem;
    top: 0.7em;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--line-color, var(--border));
}

/* NOUVEAU V46: Styles pour les étapes de marche détaillées */
.route-details .intermediate-stops-list.walk-steps {
    border-left-color: transparent;
    padding-left: 0;
    margin-left: 0;
    font-weight: 500;
}
.route-details .intermediate-stops-list.walk-steps li {
    padding-left: 0;
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
}
.route-details .intermediate-stops-list.walk-steps li::before {
    display: none;
}
.route-details .intermediate-stops-list.walk-steps svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--text-secondary);
    margin-top: 0.2em;
}
.route-details .intermediate-stops-list .walk-step-info {
    display: flex;
    flex-direction: column;
}
.route-details .intermediate-stops-list .walk-step-meta {
    font-size: 0.9em;
    color: var(--text-secondary);
    font-weight: 400;
}


/* =========================================
 * VUE 3: DÉTAIL D'ITINÉRAIRE (MOBILE IDFM)
 * ========================================= */

#itinerary-detail-container {
    /* Caché par défaut, géré par JS */
    display: none;
}

#itinerary-detail-backdrop {
    display: none;
}

/* V68: Styles desktop pour le header de détail avec bouton retour */
@media (min-width: 769px) {
    #detail-map-header {
        display: none; /* Caché par défaut sur desktop car on utilise l'accordéon */
    }

    /* Sur desktop, afficher le bouton retour quand la vue détail est active */
    #itinerary-detail-container.is-active #detail-map-header {
        display: flex;
        position: absolute;
        top: 1rem;
        left: 1rem;
        z-index: 1400;
        gap: 1rem;
        align-items: center;
        background: none;
    }
    #itinerary-detail-container.is-active #detail-map-header #btn-back-to-results {
        background: rgba(255, 255, 255, 0.95);
        color: #1e293b;
        box-shadow: var(--shadow-md);
        width: 44px;
        height: 44px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        border: none;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    body.dark-theme #itinerary-detail-container.is-active #detail-map-header #btn-back-to-results {
        background: rgba(15, 23, 42, 0.95);
        color: #f1f5f9;
    }
    #itinerary-detail-container.is-active #detail-map-header #btn-back-to-results:hover {
        transform: scale(1.05);
        box-shadow: var(--shadow-lg);
    }
}

/* Styles mobiles pour la vue résultats (Étape 1: Liste) */
@media (max-width: 768px) {
    /* AMÉLIORATION LECTURE (mobile) */
    .wait-time,
    .departure-time strong,
    .step-time-detail {
        font-size: 0.875rem; /* Au lieu de 0.8125rem */
    }

    /* ÉTAPE 1: VUE LISTE (IDFM-style) */
    
    /* Rétablit la direction en colonne sur mobile */
    #itinerary-results-container {
        flex-direction: column;
        height: 100%;
        height: 100vh; /* V152: Fallback */
    }
    
    /* **CORRECTION IDFM**: Cache la carte sur la vue liste mobile */
    #itinerary-results-container #results-map {
        display: none;
    }

    /* Le panneau latéral prend tout l'écran */
    #results-side-panel {
        width: 100%;
        flex: 1;
        border-right: none;
        height: 100%;
        overflow-y: auto; /* Toute la colonne redevient scrollable */
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        display: flex;
        flex-direction: column;
        min-height: 0; /* Crucial pour permettre le scroll dans un flex column */
    }

    .results-list-wrapper {
        flex: none;
        display: block;
        overflow: visible;
        padding-bottom: 0;
    }
    .results-list {
        flex: none;
        overflow: visible;
        max-height: none;
        padding: 1rem 1rem calc(2rem + env(safe-area-inset-bottom));
    }
    
    /* V69: Garder l'en-tête "Itinéraires" visible sur mobile */
    .itinerary-edit-header {
        display: flex;
        padding: 1rem 0.75rem 0.5rem;
    }
    
    .itinerary-edit-form {
        padding: 0 0.75rem 1rem;
    }
    
    #itinerary-edit-panel {
        padding: 1rem 0.75rem;
    }
    
    .results-planner-inputs {
        width: 100%;
    }

    /* --- Styles mobiles pour les détails d'itinéraire (ACCORDÉON PC) --- */
    /* On cache l'accordéon PC sur mobile */
    .route-details {
        display: none !important;
    }


    /* ============================================ */
    /* ÉTAPE 2 & 3: VUE DÉTAIL (Overlay IDFM-style) */
    /* ============================================ */

    #itinerary-detail-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(8, 15, 28, 0.55);
        z-index: 1080;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    }
    #itinerary-detail-backdrop.is-active {
        opacity: 1;
        pointer-events: auto;
    }
    #itinerary-detail-backdrop.hidden {
        display: none !important;
    }

    #itinerary-detail-container {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1110;
        pointer-events: none;
        /* Bloquer absolument tout scroll */
        overflow: hidden !important;
        overflow-x: hidden !important;
        overflow-y: hidden !important;
        overscroll-behavior: none;
        touch-action: none;
        /* Pas de scrollbar */
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    #itinerary-detail-container::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
    }
    #itinerary-detail-container.is-active {
        pointer-events: auto;
    }
    #itinerary-detail-container.hidden {
        display: none !important;
    }

    #detail-map {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        background: #e5e5e5;
        z-index: 0;
        touch-action: manipulation; /* Permet le pinch-to-zoom mais bloque le scroll natif */
        overflow: hidden !important; /* Bloquer scroll natif */
        -webkit-overflow-scrolling: auto;
        /* Cacher toutes les scrollbars */
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE/Edge */
    }
    #detail-map::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
    }
    /* Cacher aussi les scrollbars des éléments enfants de la carte */
    #detail-map * {
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    #detail-map *::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
    }

    /* Le fond de carte reste toujours interactif */

    #detail-bottom-sheet {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        background: var(--bg-main);
        border-radius: 24px 24px 0 0;
        box-shadow: 0 -25px 60px rgba(15, 23, 42, 0.45);
        height: var(--sheet-height, 40vh);
        padding-bottom: calc(env(safe-area-inset-bottom) + 12px);
        transform: translateY(100%);
        transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), height 0.25s ease;
        overflow: hidden;
        pointer-events: auto;
        display: flex;
        flex-direction: column;
        z-index: 1200; /* Sits above map header so drags reach the sheet */
        /* Bloquer tout overflow par défaut */
        overflow-y: hidden;
        overflow-x: hidden;
        will-change: transform; /* Optimiser les performances de l'animation */
    }
    #itinerary-detail-container.is-active #detail-bottom-sheet {
        transform: translateY(0);
    }
    /* Transition fluide à la fermeture aussi */
    #itinerary-detail-container:not(.is-active) #detail-bottom-sheet {
        transform: translateY(100%);
        transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    }
    #detail-bottom-sheet.is-dragging {
        transition: none !important;
        touch-action: none;
        user-select: none;
        -webkit-user-select: none;
    }

    #detail-bottom-sheet.sheet-height-no-transition {
        transition: transform 0.3s ease-in-out, height 0s;
    }

    #detail-bottom-sheet .panel-handle {
        display: block;
        width: 48px;
        height: 5px;
        border-radius: 999px;
        background: var(--border);
        margin: 12px auto 8px;
        cursor: grab;
        touch-action: none;
        /* V60: Zone de touch plus grande */
        padding: 12px 40px;
        background-clip: content-box;
    }
    #detail-bottom-sheet.is-dragging .panel-handle {
        cursor: grabbing;
        background: var(--primary);
    }
    
    /* V60: Indicateur visuel pour dire de drag vers le haut */
    #detail-bottom-sheet:not(.is-expanded)::after {
        content: 'Glissez vers le haut pour voir plus';
        position: absolute;
        bottom: 16px;
        left: 50%;
        transform: translateX(-50%);
        font-size: 0.75rem;
        color: var(--text-secondary);
        opacity: 0.6;
        pointer-events: none;
        white-space: nowrap;
    }

    /* Style du header de la carte */
    #detail-map-header {
        position: absolute;
        top: 24px;
        left: 0;
        right: 0;
        z-index: 1400;
        padding: 0 1rem;
        display: flex;
        align-items: center;
        gap: 1rem;
        background: none; /* V68: Pas de gradient pour éviter les conflits */
        pointer-events: none; /* Let drags pass through except on interactive children */
    }
    #detail-map-header #btn-back-to-results {
        background: rgba(255, 255, 255, 0.95);
        color: #1e293b; /* V68: Couleur fixe sombre pour le mode clair */
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        pointer-events: auto;
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        border: none;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        /* V68: Empêcher le mouvement au clic */
        position: relative;
        transform: none;
        transition: box-shadow 0.2s ease;
    }
    #detail-map-header #btn-back-to-results:active {
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    }
    
    #detail-map-summary {
        background: rgba(255, 255, 255, 0.9);
        backdrop-filter: blur(5px);
        padding: 0.5rem 1rem;
        border-radius: var(--radius-full);
        box-shadow: var(--shadow-md);
        font-weight: 600;
        font-size: 0.9rem;
        pointer-events: none;
    }
    #detail-map-summary .route-time { margin-right: 0.75rem; }
    #detail-map-summary .route-duration { color: var(--text-secondary); }

    #detail-panel-wrapper {
        flex: 1 1 auto;
        width: 100%;
        min-height: 0;
        overflow: hidden; /* Par défaut : pas de scroll */
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        touch-action: none; /* Bloque le touch scroll par défaut */
        padding-top: 0.5rem;
        position: relative;
        background: var(--bg-main);
    }
    
    /* Uniquement quand le sheet est expanded : permettre le scroll */
    #detail-bottom-sheet.is-expanded #detail-panel-wrapper {
        overflow-y: auto;
        overflow-x: hidden;
        touch-action: pan-y;
        /* Scrollbar fine */
        scrollbar-width: thin;
        scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
    }
    
    #detail-bottom-sheet.is-expanded #detail-panel-wrapper::-webkit-scrollbar {
        width: 6px;
    }
    #detail-bottom-sheet.is-expanded #detail-panel-wrapper::-webkit-scrollbar-track {
        background: transparent;
    }
    #detail-bottom-sheet.is-expanded #detail-panel-wrapper::-webkit-scrollbar-thumb {
        background: rgba(0, 0, 0, 0.2);
        border-radius: 3px;
    }
    #detail-bottom-sheet.is-expanded #detail-panel-wrapper::-webkit-scrollbar-thumb:hover {
        background: rgba(0, 0, 0, 0.35);
    }
    
    /* V60: Masquer explicitement la scrollbar quand non expanded */
    #detail-bottom-sheet:not(.is-expanded) #detail-panel-wrapper {
        overflow: hidden !important;
        touch-action: none !important;
        scrollbar-width: none;
    }
    #detail-bottom-sheet:not(.is-expanded) #detail-panel-wrapper::-webkit-scrollbar {
        display: none;
        width: 0;
    }

    #detail-panel-content {
        padding: 0.75rem 1rem 4rem 1rem;
    }

    /* Header keeps its translucent gradient regardless of sheet state */
    
   /* ============================================ */
/* STYLAGE DES ÉTAPES (IDFM-style) */
/* ============================================ */

#detail-panel-content .step-detail {
    display: flex;
    position: relative;
    padding-left: 3rem; /* MODIFIÉ: 2.5rem -> 3rem (plus d'espace) */
    padding-bottom: 1.5rem;
    min-height: 40px;
    /* variable --line-color définie inline par JS */
}

#detail-panel-content .step-detail:last-child {
    padding-bottom: 0;
}

#detail-panel-content .step-detail::before {
    content: '';
    position: absolute;
    left: 15px;
    top: 0;
    bottom: -1.5rem; /* ⬅️ Correspond au padding-bottom de .step-detail */
    width: 4px;
    background: var(--line-color, var(--border));
}

/* Masquer la ligne pour la dernière étape */
#detail-panel-content .step-detail:last-child::before {
    bottom: 0.75rem;
}
    
    /* Point de départ/arrêt */
    #detail-panel-content .step-detail::after {
        content: '';
        position: absolute;
        left: 11px; /* (32px / 2) - (12px / 2) + 1px */
        top: 4px;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: var(--bg-main);
        border: 2px solid var(--line-color, var(--border));
        z-index: 1; /* V36 */
    }
    
    #detail-panel-content .step-detail.walk::before,
    #detail-panel-content .step-detail.bicycle::before { /* Ajout vélo */
        background: repeating-linear-gradient(
            var(--line-color, var(--text-secondary)) 0,
            var(--line-color, var(--text-secondary)) 4px,
            transparent 4px,
            transparent 8px
        );
    }
    #detail-panel-content .step-detail.walk::after,
    #detail-panel-content .step-detail.bicycle::after { /* Ajout vélo */
        border-color: var(--line-color, var(--text-secondary));
    }
    
    /* Icône de l'étape */
    #detail-panel-content .step-icon {
        position: absolute;
        left: 0;
        top: 0;
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: var(--bg-main);
        z-index: 2; /* Au-dessus de la ligne */
    }
    
    /* Icône pour la MARCHE */
    #detail-panel-content .step-detail.walk .step-icon,
    #detail-panel-content .step-detail.bicycle .step-icon { /* Ajout vélo */
        background: var(--bg-main);
        color: var(--text-secondary);
    }
    #detail-panel-content .step-detail.walk .step-icon svg {
        width: 20px;
        height: 20px;
    }
    /* NOUVEAU: Ajout vélo */
    #detail-panel-content .step-detail.bicycle .step-icon svg {
        width: 20px;
        height: 20px;
    }
    
    /* Icône pour le BUS (badge) */
    #detail-panel-content .step-icon .route-line-badge {
        font-size: 0.9rem;
        padding: 0.4rem 0.6rem;
        min-width: 32px;
        height: 32px;
        border-radius: 50%; /* Rond comme IDFM */
        box-shadow: var(--shadow-sm);
        border: 2px solid white;
    }
    
    #detail-panel-content .step-info {
        display: flex;
        flex-direction: column;
        padding-top: 4px; /* Aligner avec l'icône */
    }
    
    #detail-panel-content .step-instruction {
        font-size: 1rem;
        font-weight: 600;
        color: var(--text-primary);
        line-height: 1.4;
    }

    #detail-panel-content .step-detail.wait .wait-info {
        display: flex;
        flex-direction: column;
        gap: 0.1rem;
    }
    #detail-panel-content .wait-info .wait-time {
        font-size: 0.95rem;
        font-weight: 600;
        color: var(--text-secondary);
    }
    #detail-panel-content .wait-info .wait-duration {
        font-size: 0.9rem;
        color: var(--text-secondary);
    }
    #detail-panel-content .step-duration-inline {
        font-size: 0.9rem;
        font-weight: 500;
        color: var(--text-secondary);
        margin-left: 0.25rem;
    }
    #detail-panel-content .step-sub-instruction {
        font-size: 0.9rem;
        color: var(--text-secondary);
        margin-top: 0.25rem;
    }

    /* Montée et Descente */
    #detail-panel-content .step-stop-point {
        margin-top: 0.75rem;
        padding-left: 0;
        position: relative;
        font-size: 0.9rem;
        color: var(--text-primary);
        font-weight: 600;
    }
    #detail-panel-content .step-stop-point::before {
        /* On n'utilise plus la puce, on a la ligne verticale */
        display: none;
    }
    #detail-panel-content .step-stop-point .step-time-detail {
        font-size: 0.875rem;
        color: var(--text-secondary);
        margin-left: 0.5rem;
        font-weight: 500;
    }
    
    /* Arrêts intermédiaires */
    #detail-panel-content .intermediate-stops {
        margin: 0.75rem 0 0.75rem 0;
        padding-left: 0;
    }
    #detail-panel-content .intermediate-stops summary {
        font-size: 0.875rem;
        font-weight: 600;
        color: var(--primary);
        padding: 0.25rem 0;
    }
    #detail-panel-content .intermediate-stops-list {
        margin: 0.5rem 0 0 0;
        padding-left: 0.5rem;
        list-style-type: none;
        font-size: 0.875rem;
        color: var(--text-secondary);
        border-left: 4px solid var(--line-color, var(--border));
    }
    #detail-panel-content .intermediate-stops-list li {
        position: relative;
        padding: 0.3rem 0 0.3rem 0.75rem;
    }
    #detail-panel-content .intermediate-stops-list li::before {
        content: '';
        position: absolute;
        left: -0.7rem;
        top: 0.65em;
        width: 8px;
        height: 2px;
        background: var(--line-color, var(--border));
    }
    
    /* NOUVEAU V46: Styles pour les étapes de marche détaillées */
    #detail-panel-content .intermediate-stops-list.walk-steps {
        border-left-color: transparent;
        padding-left: 0;
        margin-top: 0.75rem;
    }
    #detail-panel-content .intermediate-stops-list.walk-steps li {
        padding-left: 0;
        display: flex;
        gap: 0.75rem;
        align-items: flex-start;
        padding-bottom: 0.5rem;
    }
    #detail-panel-content .intermediate-stops-list.walk-steps li::before {
        display: none;
    }
    #detail-panel-content .intermediate-stops-list.walk-steps svg {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
        color: var(--text-secondary);
        margin-top: 0.2em;
    }
    #detail-panel-content .intermediate-stops-list .walk-step-info {
        display: flex;
        flex-direction: column;
        line-height: 1.5;
    }
    #detail-panel-content .intermediate-stops-list .walk-step-meta {
        font-size: 0.9em;
        color: var(--text-secondary);
        font-weight: 400;
    }
/* =========================================
 * ANIMATIONS & MOBILE OPTIMIZATIONS
 * ========================================= */

/* 1. L'Animation d'entrée (Le site "glisse" vers le haut) */
@keyframes slideUpFade {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

.hero-section, 
.main-nav-buttons-condensed {
    animation: slideUpFade 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    opacity: 0; /* Caché au départ */
}
.main-nav-buttons-condensed { animation-delay: 0.1s; }

/* .bottom-content-wrapper ne doit PAS avoir d'animation :
   une animation crée un stacking context qui gêne l'empilement
   avec le planificateur. On conserve son rendu sans animation. */
.bottom-content-wrapper {
    opacity: 1; /* visible par défaut, pas d'animation */
}


/* 2. RESTRUCTURATION MOBILE (Le plus important) */
    
    /* Réduire les marges du bloc principal */
    .hero-section {
        padding: 1.25rem 1rem;
        margin-bottom: 1rem;
    }

    /* TRANSFORMER LES 3 BOUTONS EN GRILLE HORIZONTALE */
    .main-nav-buttons-condensed {
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* 3 colonnes égales */
        gap: 0.75rem; /* Espace réduit */
        margin-top: 1.5rem;
    }

    .nav-button-condensed {
        padding: 0.75rem 0.25rem;
        flex-direction: column; /* Icône au-dessus du texte */
        text-align: center;
        justify-content: flex-start;
        height: auto;
        aspect-ratio: 1 / 1; /* Carré parfait */
        border-radius: 16px; /* Plus arrondi (style iOS) */
    }

    .nav-button-condensed svg {
        width: 24px;
        height: 24px;
        margin-bottom: 6px; /* Espace entre icône et texte */
    }

    .nav-button-condensed span {
        font-size: 0.7rem; /* Texte plus petit */
        line-height: 1.1;
    }

    /* ALIGNER LES CHIFFRES CLÉS SUR UNE LIGNE */
    .key-figures-grid {
        display: flex;
        flex-direction: row; /* Force la ligne */
        justify-content: space-between; /* Espacement égal */
        align-items: flex-start;
        gap: 0.5rem;
        padding: 0.5rem 0;
        /* Défensif : s'assurer que ce bloc reste sous le popover 'Quand' */
        position: relative;
        z-index: 10 !important;
    }

    .key-figure-item {
        flex: 1;
        margin-bottom: 0; /* Supprime la marge verticale */
    }

    .key-figure-number {
        font-size: 1.5rem; /* Chiffres un peu plus petits pour tenir */
    }

    .key-figure-label {
        font-size: 0.7rem;
    }
    
    /* Réduire la taille du titre "Où allons-nous ?" */
    .hero-section .planner-block .planner-title-bar h3 {
        font-size: 1.2rem;
    }

    

    /* Ajustement spécifique des badges dans le panneau détail (mobile) */
    #detail-panel-content .step-icon .route-line-badge {
        font-size: 0.9rem;
        padding: 0.4rem 0.6rem;
        min-width: 32px;
        height: 32px;
        border-radius: 50%;
        box-shadow: var(--shadow-sm);
        border: 2px solid white;
    }

} /* ⬅️ FIN du @media (max-width: 768px) */
/* ⬅️ FIN du @media (max-width: 768px) pour itinerary-detail */

/* ============================================
   BANNIÈRE DE MISE À JOUR
   ============================================ */
@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

#update-banner {
    font-family: inherit;
}

#update-banner .update-banner-content {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.9rem;
    font-weight: 500;
}

#update-banner .btn-sm {
    padding: 6px 14px;
    font-size: 0.85rem;
    border-radius: 8px;
}

#update-banner #update-dismiss {
    width: 28px;
    height: 28px;
    font-size: 1.2rem;
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--text-secondary);
}

#update-banner #update-dismiss:hover {
    color: var(--text-primary);
}

@media (max-width: 480px) {
    #update-banner {
        left: 10px;
        right: 10px;
        transform: none;
        bottom: 10px;
    }
    
    #update-banner .update-banner-content {
        flex-wrap: wrap;
        justify-content: center;
    }
}

/* =========================================
 * NOUVEAU DESIGN IDFM-STYLE
 * ========================================= */

/* --- BARRE SUPÉRIEURE INFO --- */
#top-info-bar {
    background: linear-gradient(135deg, #1e3a5f 0%, #0d2137 100%);
    padding: 0.5rem 1.5rem;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.9);
}

.top-info-content {
    max-width: 1300px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.top-info-left {
    display: flex;
    gap: 1.5rem;
}

.top-info-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    transition: color 0.2s ease;
}

.top-info-link:hover {
    color: #fff;
}

.top-info-link svg {
    opacity: 0.7;
}

.top-info-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.75rem;
    background: rgba(34, 197, 94, 0.2);
    border: 1px solid rgba(34, 197, 94, 0.4);
    border-radius: var(--radius-full);
    color: #4ade80;
    font-weight: 600;
}

/* Cache la barre sur les vues plein écran */
body.view-is-locked #top-info-bar {
    display: none;
}

/* Dark mode */
body.dark-theme #top-info-bar {
    background: linear-gradient(135deg, #0a1929 0%, #071018 100%);
}

/* Mobile: simplifie */
@media (max-width: 768px) {
    #top-info-bar {
        padding: 0.4rem 1rem;
    }
    
    .top-info-left {
        gap: 0.75rem;
    }
    
    .top-info-link span {
        display: none;
    }
    
    .top-info-badge span {
        display: none;
    }
}

/* --- HEADER NAVIGATION LINK --- */
.header-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.85rem;
    color: var(--text-secondary);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.875rem;
    border-radius: var(--radius-full);
    transition: all 0.2s ease;
}

.header-nav-link:hover {
    background: var(--bg-secondary);
    color: var(--primary);
}

.header-nav-link svg {
    opacity: 0.7;
}

@media (max-width: 768px) {
    .header-nav-link span {
        display: none;
    }
    
    .header-nav-link {
        padding: 0.5rem;
    }
}

/* --- HERO HEADLINE --- */
.hero-headline {
    text-align: center;
    margin-bottom: 2rem;
    padding-top: 1rem;
}

.hero-headline h1 {
    font-size: 2.25rem;
    font-weight: 800;
    color: #fff;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5), 0 4px 20px rgba(0, 0, 0, 0.3);
    margin: 0 0 0.75rem 0;
    line-height: 1.2;
}

.hero-headline h1 .highlight {
    background: linear-gradient(135deg, #4ade80 0%, #22d3ee 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: none;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}

.hero-subtitle {
    font-size: 1.125rem;
    color: rgba(255, 255, 255, 0.95);
    font-weight: 500;
    margin: 0;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}

@media (max-width: 768px) {
    .hero-headline {
        margin-bottom: 1.25rem;
        padding-top: 0.5rem;
    }
    
    .hero-headline h1 {
        font-size: 1.5rem;
    }
    
    .hero-subtitle {
        font-size: 0.9rem;
    }
}

/* --- SERVICES SECTION --- */
.services-section {
    max-width: 900px;
    margin: 2.5rem auto 0;
    padding: 0 1rem;
}

.section-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 1.25rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.section-title::before {
    content: '';
    width: 4px;
    height: 1.25rem;
    background: var(--primary);
    border-radius: 2px;
}

.services-grid {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.service-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--bg-main);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.25rem 1.5rem;
    cursor: pointer;
    transition: all var(--transition-normal), transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    text-align: left;
    position: relative;
    box-shadow: var(--shadow-sm);
}

.service-card:hover {
    border-color: var(--primary);
    box-shadow: 0 8px 24px rgba(37, 99, 235, 0.15);
    transform: translateY(-3px) scale(1.01);
}

.service-card:active {
    transform: translateY(-1px) scale(0.99);
    transition: transform 0.1s ease;
}

.service-card-icon {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.service-card:hover .service-card-icon {
    transform: scale(1.1) rotate(3deg);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.service-card-icon--green {
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
    color: #16a34a;
}

.service-card-icon--orange {
    background: linear-gradient(135deg, #ffedd5 0%, #fed7aa 100%);
    color: #ea580c;
}

.service-card-icon--blue {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    color: #2563eb;
}

.service-card-content {
    flex: 1;
    min-width: 0;
}

.service-card-content h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.35rem 0;
}

.service-card-content p {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.5;
}

.service-card-arrow {
    color: var(--text-secondary);
    opacity: 0.5;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.service-card:hover .service-card-arrow {
    opacity: 1;
    color: var(--primary);
    transform: translateX(4px);
}

.service-card .notification-badge {
    position: absolute;
    top: 1rem;
    right: 3rem;
}

/* Dark mode */
body.dark-theme .service-card {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.08);
}

body.dark-theme .service-card-icon--green {
    background: rgba(34, 197, 94, 0.15);
}

body.dark-theme .service-card-icon--orange {
    background: rgba(249, 115, 22, 0.15);
}

body.dark-theme .service-card-icon--blue {
    background: rgba(59, 130, 246, 0.15);
}

/* Mobile */
@media (max-width: 768px) {
    .services-section {
        margin-top: 1.5rem;
    }
    
    .service-card {
        padding: 1rem;
    }
    
    .service-card-icon {
        width: 48px;
        height: 48px;
    }
    
    .service-card-icon svg {
        width: 24px;
        height: 24px;
    }
    
    .service-card-content h3 {
        font-size: 1rem;
    }
    
    .service-card-content p {
        font-size: 0.8rem;
    }
}

/* --- PROMO BANNER --- */
.promo-banner {
    max-width: 900px;
    margin: 2rem auto 0;
    padding: 0 1rem;
}

.promo-banner-content {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
    border-radius: var(--radius-lg);
    padding: 1.25rem 1.5rem;
    color: #fff;
    box-shadow: 0 4px 20px rgba(14, 165, 233, 0.3);
}

.promo-banner-icon {
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.promo-banner-text {
    flex: 1;
    min-width: 0;
}

.promo-banner-text strong {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.promo-banner-text span {
    font-size: 0.875rem;
    opacity: 0.9;
}

.promo-banner-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 1.25rem;
    background: #fff;
    color: #0284c7;
    border-radius: var(--radius-full);
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: none;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.promo-banner-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* Mobile */
@media (max-width: 768px) {
    .promo-banner-content {
        flex-direction: column;
        text-align: center;
        padding: 1.25rem 1rem;
    }
    
    .promo-banner-icon {
        display: none;
    }
    
    .promo-banner-btn {
        width: 100%;
        justify-content: center;
    }
}

/* --- STATS SECTION --- */
.stats-section {
    max-width: 900px;
    margin: 2rem auto 0;
    padding: 0 1rem 2rem;
}

.stats-card {
    background: var(--bg-main);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
}

.stats-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}

.stats-header svg {
    color: var(--primary);
}

.stats-header h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.stat-item {
    text-align: center;
    padding: 0.75rem;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
}

.stat-number {
    display: block;
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--primary);
    line-height: 1.2;
}

.stat-label {
    display: block;
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-weight: 500;
    margin-top: 0.25rem;
}

/* Dark mode */
body.dark-theme .stats-card {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.08);
}

body.dark-theme .stat-item {
    background: rgba(255, 255, 255, 0.05);
}

/* Mobile */
@media (max-width: 768px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .stat-number {
        font-size: 1.5rem;
    }
}

/* --- FOOTER PROFESSIONNEL --- */
#site-footer {
    background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
    color: #e2e8f0;
    margin-top: auto;
    padding: 0;
    position: relative;
    z-index: 10;
}

/* Cache le footer sur les vues plein écran */
body.view-is-locked #site-footer {
    display: none;
}

/* V88: Cache le footer sur la vue carte sur desktop (carte plein écran) */
@media (min-width: 769px) {
    body.view-map-locked #site-footer {
        display: none;
    }
}

.footer-content {
    max-width: 1300px;
    margin: 0 auto;
    padding: 2.5rem 1.5rem 1.5rem;
}

.footer-main {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 3rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-brand {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.footer-logo {
    width: 48px;
    height: 48px;
    object-fit: contain;
}

.footer-brand-text {
    display: flex;
    flex-direction: column;
}

.footer-brand-name {
    font-size: 1.25rem;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(120deg, #60a5fa, #34d399);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.footer-brand-tagline {
    font-size: 0.875rem;
    color: #94a3b8;
    margin-top: 0.25rem;
}

.footer-links {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    align-items: start;
}

.footer-links-column h4 {
    font-size: 0.85rem;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 1rem 0;
}

.footer-links-column a {
    display: block;
    color: #94a3b8;
    text-decoration: none;
    font-size: 0.9rem;
    padding: 0.35rem 0;
    transition: color var(--transition-fast), transform var(--transition-fast);
    position: relative;
}

.footer-links-column a:hover {
    color: #60a5fa;
    transform: translateX(4px);
}

.footer-links-column a::before {
    content: '→';
    position: absolute;
    left: -15px;
    opacity: 0;
    transition: opacity var(--transition-fast), left var(--transition-fast);
}

.footer-links-column a:hover::before {
    opacity: 1;
    left: -12px;
}

.footer-data-info {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: #94a3b8;
    font-size: 0.85rem;
    margin: 0;
}

.footer-data-info svg {
    opacity: 0.6;
}

.footer-license {
    font-size: 0.8rem;
    color: #64748b;
    margin: 0.25rem 0 0 0;
}

.footer-bottom {
    padding-top: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.footer-independent {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    color: #64748b;
    margin: 0;
    padding: 0.35rem 0.75rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-full);
}

.footer-independent svg {
    opacity: 0.6;
}

.footer-copyright {
    font-size: 0.8rem;
    color: #64748b;
    margin: 0;
}

/* === FOOTER SOCIAL LINKS === */
.footer-social-column {
    min-width: 100px;
}

.footer-social-column h4 {
    margin-bottom: 0.75rem !important;
}

.footer-social-links {
    display: flex;
    gap: 0.5rem;
    margin-top: 0;
    align-items: center;
}

.footer-social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: #94a3b8;
    transition: all 0.25s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-social-btn svg {
    width: 20px;
    height: 20px;
}

.footer-social-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

/* Instagram gradient */
.footer-social-btn[aria-label*="Instagram"]:hover {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    color: white;
    border-color: transparent;
}

/* Facebook blue */
.footer-social-btn[aria-label*="Facebook"]:hover {
    background: #1877f2;
    color: white;
    border-color: transparent;
}

/* Footer bottom social (mobile) */
.footer-bottom-right {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.footer-social-mobile {
    display: none;
}

.footer-social-btn-sm {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: #94a3b8;
    transition: all 0.2s ease;
}

.footer-social-btn-sm svg {
    width: 16px;
    height: 16px;
}

.footer-social-btn-sm:hover {
    transform: scale(1.1);
}

.footer-social-btn-sm[aria-label*="Instagram"]:hover {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    color: white;
}

.footer-social-btn-sm[aria-label*="Facebook"]:hover {
    background: #1877f2;
    color: white;
}

/* Mobile */
@media (max-width: 768px) {
    .footer-main {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .footer-brand {
        justify-content: center;
        text-align: center;
    }
    
    .footer-links {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        text-align: center;
    }
    
    .footer-links-column h4 {
        margin-bottom: 0.75rem;
    }
    
    .footer-social-links {
        justify-content: center;
    }
    
    .footer-social-column {
        order: -1; /* Social en premier sur mobile */
    }

    .footer-data-info {
        justify-content: center;
    }
    
    .footer-bottom {
        flex-direction: column;
        text-align: center;
        gap: 0.75rem;
    }
    
    .footer-bottom-right {
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .footer-social-mobile {
        display: flex;
        gap: 0.5rem;
    }
}

/* --- ANIMATIONS POUR LES NOUVELLES SECTIONS --- */
.services-section,
.promo-banner,
.stats-section {
    animation: slideUpFade 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    /* Visible par défaut au cas où l'animation ne joue pas */
}

.services-section { animation-delay: 0.15s; }
.promo-banner { animation-delay: 0.25s; }
.stats-section { animation-delay: 0.35s; }

/* --- NETWORK DELAYS WIDGET REPOSITIONNÉ --- */
.network-delays-widget {
    max-width: 900px;
    margin: 1.5rem auto 0;
    padding: 0 1rem;
}

.network-delays-widget .network-delays-header {
    background: #fef3c7;
    border: 1px solid #fcd34d;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: #92400e;
}

.network-delays-widget .network-delays-list {
    background: var(--bg-main);
    border: 1px solid var(--border);
    border-top: none;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    padding: 0.5rem;
}

/* --- FIX: Adjust header padding --- */
body:not(.view-is-locked) {
    padding-top: 0; /* Reset default padding */
}

@media (max-width: 768px) {
    body:not(.view-is-locked) {
        padding-top: 56px; /* Header only */
    }
}

@media (min-width: 769px) {
    body:not(.view-is-locked) #main-header {
        top: 0;
    }
    
    #main-header {
        position: sticky;
        top: 0;
    }
}

/* =========================================
 * NAVIGATION DROPDOWN IDFM-STYLE
 * ========================================= */

/* Navigation principale desktop */
.header-nav-main {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: 2rem;
}

.nav-dropdown {
    position: relative;
}

.nav-dropdown-trigger {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    border-radius: var(--radius-md);
    transition: all 0.2s ease;
    font-family: inherit;
}

.nav-dropdown-trigger:hover {
    background: var(--bg-secondary);
    color: var(--primary);
}

.nav-dropdown-trigger svg {
    transition: transform 0.2s ease;
    opacity: 0.6;
}

.nav-dropdown:hover .nav-dropdown-trigger svg,
.nav-dropdown.is-open .nav-dropdown-trigger svg {
    transform: rotate(180deg);
}

.nav-dropdown-menu {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    min-width: 220px;
    background: var(--bg-main);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    padding: 0.5rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px) scale(0.95);
    transform-origin: top left;
    transition: all var(--transition-normal);
    z-index: 1200;
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown.is-open .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.nav-dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    color: var(--text-primary);
    text-decoration: none;
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    font-weight: 500;
    transition: all var(--transition-fast);
    position: relative;
    overflow: hidden;
}

.nav-dropdown-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 0;
    background: var(--primary);
    border-radius: 0 2px 2px 0;
    transition: height var(--transition-fast);
}

.nav-dropdown-item:hover {
    background: var(--bg-secondary);
    color: var(--primary);
    padding-left: 1.25rem;
}

.nav-dropdown-item:hover::before {
    height: 60%;
}

.nav-dropdown-item svg {
    color: var(--text-secondary);
    flex-shrink: 0;
}

.nav-dropdown-item:hover svg {
    color: var(--primary);
}

.nav-dropdown-item--disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.nav-badge {
    display: inline-flex;
    padding: 0.15rem 0.5rem;
    background: var(--primary);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    border-radius: var(--radius-full);
    margin-left: auto;
}

/* Header nav right */
.header-nav-right {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-left: auto;
    height: 100%;
}

.header-nav-right .btn-icon-round {
    margin: 0;
}

/* Mobile menu toggle */
.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    padding: 8px;
    background: transparent;
    border: none;
    cursor: pointer;
    border-radius: var(--radius-md);
    order: -1; /* Mettre en premier sur mobile */
}

.mobile-menu-toggle span {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--text-primary);
    border-radius: 2px;
    transition: all 0.3s ease;
}

.mobile-menu-toggle.is-active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.mobile-menu-toggle.is-active span:nth-child(2) {
    opacity: 0;
}

.mobile-menu-toggle.is-active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* Mobile menu */
.mobile-menu {
    position: absolute;
    top: 100%; /* Juste en dessous du header */
    left: 0;
    right: 0;
    max-height: calc(100vh - 56px - 20px); /* Hauteur max avec marge */
    background: #0f172a; /* Fond solide bleu foncé */
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    padding: 0.75rem;
    overflow-y: auto;
    animation: slideInDown 0.25s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    transform-origin: top center;
    z-index: 1100;
}

@keyframes slideInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.mobile-menu.hidden {
    display: none;
}

.mobile-menu-section {
    margin-bottom: 0.25rem;
    background: transparent;
    border-radius: var(--radius-md);
    padding: 0;
}

.mobile-menu-section:last-child {
    margin-bottom: 0;
}

.mobile-menu-section h4 {
    font-size: 0.75rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 0.75rem 0;
    padding-left: 0.5rem;
}

.mobile-menu-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    color: #FFFFFF !important;
    text-decoration: none;
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    font-weight: 500;
    transition: all var(--transition-fast);
    position: relative;
}

.mobile-menu-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 0;
    background: var(--primary);
    border-radius: 0 2px 2px 0;
    transition: height var(--transition-fast);
}

.mobile-menu-item:hover {
    background: rgba(255, 255, 255, 0.1);
    padding-left: 1.25rem;
    color: #FFFFFF;
}

.mobile-menu-item:hover::before {
    height: 60%;
}

.mobile-menu-item:active {
    transform: scale(0.98);
}

.mobile-menu-item--disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* === CATÉGORIES DÉPLIABLES (ACCORDÉON) === */
.mobile-menu-category {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.7rem 0.75rem;
    background: transparent !important;
    background-color: transparent !important;
    border: none;
    outline: none !important;
    box-shadow: none !important;
    font-size: 0.85rem;
    font-weight: 700;
    color: #FFFFFF !important;
    opacity: 1 !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: var(--radius-md);
}

.mobile-menu-category *,
.mobile-menu-category span,
.mobile-menu-category svg {
    color: #FFFFFF !important;
    stroke: #FFFFFF !important;
    opacity: 1 !important;
    fill: none;
}

.mobile-menu-category:focus,
.mobile-menu-category:focus-visible,
.mobile-menu-category:focus-within,
.mobile-menu-category:active,
.mobile-menu-category:hover,
button.mobile-menu-category:focus,
button.mobile-menu-category:active {
    background: transparent !important;
    background-color: transparent !important;
    outline: none !important;
    outline-width: 0 !important;
    box-shadow: none !important;
    border: none !important;
    color: #FFFFFF !important;
    -webkit-tap-highlight-color: transparent !important;
}

.mobile-menu-category:hover {
    color: #FFFFFF !important;
}

.mobile-menu-category:hover span,
.mobile-menu-category:hover svg {
    color: #FFFFFF !important;
    stroke: #FFFFFF;
}

.mobile-menu-category:active {
    transform: scale(0.98);
}

.mobile-menu-chevron {
    transition: transform 0.25s ease;
    flex-shrink: 0;
    color: #FFFFFF;
}

.mobile-menu-category[aria-expanded="true"] .mobile-menu-chevron {
    transform: rotate(180deg);
}

/* Container des items - masqué par défaut */
.mobile-menu-items {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out, opacity 0.2s ease;
    opacity: 0;
}

.mobile-menu-items.is-expanded {
    max-height: 500px; /* Assez grand pour le contenu */
    opacity: 1;
    transition: max-height 0.3s ease-in, opacity 0.2s ease;
}

/* === BLOCAGE DU SCROLL === */
body.mobile-menu-open {
    overflow: hidden !important;
    position: fixed;
    width: 100%;
    height: 100%;
}

/* Dark mode */
body.dark-theme .nav-dropdown-menu {
    background: rgba(15, 23, 42, 0.98);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

body.dark-theme .mobile-menu {
    background: #0f172a; /* Fond solide en dark mode aussi */
    border-color: rgba(255, 255, 255, 0.1);
}

body.dark-theme .mobile-menu-category {
    color: #FFFFFF;
}

body.dark-theme .mobile-menu-category:hover {
    color: #FFFFFF;
}

body.dark-theme .mobile-menu-item {
    color: #FFFFFF;
}

/* Responsive */
@media (max-width: 900px) {
    .header-nav-main {
        display: none;
    }
    
    .mobile-menu-toggle {
        display: flex;
        order: -1;
    }
    
    .header-content {
        justify-content: flex-start;
        gap: 0.5rem;
    }
    
    .logo {
        flex: 1;
    }
    
    .header-nav-right {
        margin-left: auto;
        order: 10;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 56px;
    }
    
    .header-nav-right .btn-icon-round {
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
        margin: auto 0;
    }
}

@media (min-width: 901px) {
    .mobile-menu {
        display: none !important;
    }
}

/* =========================================
 * PAGE TARIFS
 * ========================================= */
.tarifs-page {
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
}

.tarifs-header {
    text-align: center;
    margin-bottom: 2rem;
}

.tarifs-header h1 {
    font-size: 2rem;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0 0 0.5rem 0;
}

.tarifs-header p {
    color: var(--text-secondary);
    font-size: 1.1rem;
}

.tarifs-card {
    background: var(--bg-main);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 2rem;
    box-shadow: var(--shadow-md);
    margin-bottom: 1.5rem;
}

.tarifs-card-warning {
    border-left: 4px solid #dc3545;
}

.tarifs-section-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 1.25rem 0;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--primary);
}

.tarifs-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
}

.tarifs-subtitle {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 1.5rem 0 0.75rem 0;
}

.tarifs-content p {
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 1rem;
}

.tarifs-content ul {
    list-style: none;
    padding: 0;
    margin: 1rem 0;
}

.tarifs-content li {
    padding: 0.5rem 0 0.5rem 1.5rem;
    position: relative;
    color: var(--text-secondary);
    line-height: 1.6;
}

.tarifs-content li::before {
    content: "•";
    color: var(--primary);
    font-weight: bold;
    position: absolute;
    left: 0;
}

.tarifs-info-box {
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    padding: 1.25rem;
    margin: 1.25rem 0;
}

.tarifs-info-item {
    display: flex;
    gap: 1rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border);
}

.tarifs-info-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.tarifs-info-item:first-child {
    padding-top: 0;
}

.tarifs-bullet {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--primary);
}

.tarifs-info-item p {
    margin: 0;
}

.tarifs-download-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: white;
    padding: 1rem 1.5rem;
    border-radius: var(--radius-md);
    text-decoration: none;
    font-weight: 600;
    margin-top: 1rem;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: var(--shadow-md);
}

.tarifs-download-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    color: white;
}

.tarifs-download-warning {
    background: linear-gradient(135deg, #dc3545, #c82333);
}

.tarifs-buy-options {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1rem;
}

.tarifs-buy-item {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    transition: border-color 0.2s;
}

.tarifs-buy-item:hover {
    border-color: var(--primary);
}

.tarifs-buy-icon {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    color: var(--primary);
}

.tarifs-buy-text {
    flex: 1;
}

.tarifs-buy-text strong {
    display: block;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.tarifs-buy-text p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.tarifs-buy-text a {
    color: var(--primary);
    text-decoration: none;
}

.tarifs-buy-text a:hover {
    text-decoration: underline;
}

.tarifs-features {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-top: 1.25rem;
}

.tarifs-feature {
    display: flex;
    gap: 1rem;
    padding: 1.25rem;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.05), rgba(37, 99, 235, 0.02));
    border-radius: var(--radius-md);
    border: 1px solid rgba(37, 99, 235, 0.1);
}

.tarifs-feature-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    color: var(--primary);
}

.tarifs-feature-content {
    flex: 1;
}

.tarifs-feature-content strong {
    display: block;
    font-size: 1.1rem;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.tarifs-feature-content p {
    margin: 0 0 0.5rem 0;
}

.tarifs-link {
    color: var(--primary);
    font-weight: 500;
    text-decoration: none;
}

.tarifs-link:hover {
    text-decoration: underline;
}

.tarifs-small {
    font-size: 0.85rem !important;
    color: var(--text-secondary) !important;
    opacity: 0.8;
}

.tarifs-amende-options {
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: var(--radius-md);
    padding: 1.25rem;
    margin: 1rem 0;
}

body.dark-theme .tarifs-amende-options {
    background: rgba(255, 193, 7, 0.1);
    border-color: rgba(255, 193, 7, 0.3);
}

.tarifs-mediation {
    background: linear-gradient(135deg, rgba(40, 167, 69, 0.08), rgba(40, 167, 69, 0.03));
    border: 1px solid rgba(40, 167, 69, 0.2);
    border-radius: var(--radius-md);
    padding: 1.25rem;
    margin-top: 1.5rem;
}

.tarifs-price {
    font-weight: 700;
    color: var(--primary);
    font-size: 1.1rem;
}

.tarifs-note {
    background: var(--bg-secondary);
    border-left: 4px solid var(--primary);
    padding: 1rem 1.25rem;
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    margin: 1.5rem 0;
}

.tarifs-note p {
    margin: 0;
    font-size: 0.9rem;
}

body.dark-theme .tarifs-card {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.08);
}

body.dark-theme .tarifs-buy-item,
body.dark-theme .tarifs-info-box {
    background: rgba(255, 255, 255, 0.03);
}

body.dark-theme .tarifs-buy-icon {
    background: rgba(255, 255, 255, 0.08);
}

body.dark-theme .tarifs-feature {
    background: rgba(74, 163, 255, 0.05);
    border-color: rgba(74, 163, 255, 0.1);
}

body.dark-theme .tarifs-mediation {
    background: rgba(40, 167, 69, 0.08);
}

/* Styles additionnels pour pages tarifs divisées */
.tarifs-intro {
    font-size: 1.1rem;
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
}

.tarifs-cta-section {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.05), rgba(37, 99, 235, 0.02));
    border: 1px solid rgba(37, 99, 235, 0.15);
    border-radius: var(--radius-md);
    padding: 1.5rem;
    margin-top: 1.5rem;
    text-align: center;
}

.tarifs-cta-text {
    margin-bottom: 1rem !important;
    font-weight: 500;
}

/* Navigation entre pages tarifs */
.tarifs-nav-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-top: 2rem;
}

.tarifs-nav-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--bg-main);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 1rem 1.25rem;
    text-decoration: none;
    transition: all 0.2s;
    box-shadow: var(--shadow-sm);
}

.tarifs-nav-card:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.tarifs-nav-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
}

.tarifs-nav-title {
    flex: 1;
    font-weight: 600;
    color: var(--text-primary);
}

.tarifs-nav-arrow {
    color: var(--primary);
    font-weight: bold;
    font-size: 1.25rem;
}

/* Liste compacte */
.tarifs-list-compact {
    list-style: none !important;
    padding: 0 !important;
    margin: 0.5rem 0 0 0 !important;
}

.tarifs-list-compact li {
    padding: 0.25rem 0 0.25rem 1rem !important;
    position: relative;
    font-size: 0.9rem;
}

.tarifs-list-compact li::before {
    content: "•";
    color: var(--primary);
    position: absolute;
    left: 0;
}

/* Bouton lien dans tarifs */
.tarifs-link-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--primary);
    font-weight: 600;
    text-decoration: none;
    padding: 0.5rem 0;
    transition: gap 0.2s;
}

.tarifs-link-btn:hover {
    gap: 0.75rem;
    text-decoration: none;
}

/* Style highlight pour achat */
.tarifs-buy-item--highlight {
    border-color: var(--primary);
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.05), transparent);
}

/* Boutons applications */
.tarifs-app-links {
    display: flex;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.tarifs-app-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-full);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: transform 0.2s;
}

.tarifs-app-btn:hover {
    transform: scale(1.05);
}

.tarifs-app-btn--android {
    background: #3ddc84;
    color: #000;
}

.tarifs-app-btn--ios {
    background: #000;
    color: #fff;
}

/* Feature billettique améliorée */
.tarifs-feature--primary {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.1), rgba(37, 99, 235, 0.03));
    border: 2px solid rgba(37, 99, 235, 0.2);
}

.tarifs-feature-benefits {
    display: flex;
    gap: 1rem;
    margin: 0.75rem 0;
}

.tarifs-benefit {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: rgba(40, 167, 69, 0.1);
    color: #28a745;
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-full);
    font-size: 0.8rem;
    font-weight: 600;
}

.tarifs-benefit svg {
    flex-shrink: 0;
}

/* Liste locations billettique */
.tarifs-list-locations {
    list-style: none !important;
    padding: 0 !important;
    margin: 1rem 0 !important;
}

.tarifs-list-locations li {
    display: flex;
    flex-direction: column;
    padding: 0.75rem !important;
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
    margin-bottom: 0.5rem;
}

.tarifs-list-locations li::before {
    display: none;
}

.tarifs-location-city {
    font-weight: 700;
    color: var(--text-primary);
}

.tarifs-location-stops {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.tarifs-distributeur-features {
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    padding: 1rem;
    margin-top: 1rem;
}

.tarifs-distributeur-features h4 {
    margin: 0 0 0.75rem 0;
    font-size: 0.95rem;
    color: var(--text-primary);
}

.tarifs-distributeur-features ul {
    margin: 0;
}

/* Cards variants pour amendes */
.tarifs-card--info {
    border-left: 4px solid var(--primary);
}

.tarifs-card--warning {
    border-left: 4px solid #ffc107;
}

.tarifs-card--success {
    border-left: 4px solid #28a745;
}

/* Alertes tarifs */
.tarifs-alert {
    padding: 1rem;
    border-radius: var(--radius-md);
    margin-bottom: 1rem;
}

.tarifs-alert--important {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.1), rgba(37, 99, 235, 0.03));
    border: 1px solid rgba(37, 99, 235, 0.2);
}

.tarifs-alert--warning {
    background: #fff3cd;
    border: 1px solid #ffc107;
}

body.dark-theme .tarifs-alert--warning {
    background: rgba(255, 193, 7, 0.1);
}

.tarifs-alert p {
    margin: 0 0 0.5rem 0;
}

.tarifs-alert p:last-child {
    margin-bottom: 0;
}

/* Options de paiement amendes */
.tarifs-payment-options {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1rem;
}

.tarifs-payment-option {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    align-items: flex-start;
}

.tarifs-payment-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    color: var(--primary);
}

.tarifs-payment-text strong {
    display: block;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.tarifs-payment-text p {
    margin: 0;
    font-size: 0.9rem;
}

.tarifs-address {
    font-style: italic;
    color: var(--text-secondary);
    margin-top: 0.5rem !important;
}

/* Box médiation */
.tarifs-mediation-box {
    background: linear-gradient(135deg, rgba(40, 167, 69, 0.1), rgba(40, 167, 69, 0.03));
    border: 2px solid rgba(40, 167, 69, 0.2);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.tarifs-mediation-question {
    font-size: 1.1rem;
    text-align: center;
    margin-bottom: 1.25rem !important;
}

.tarifs-price-highlight {
    color: #dc3545;
    font-size: 1.3rem;
}

.tarifs-mediation-choices {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.tarifs-choice {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    border-radius: var(--radius-md);
    background: var(--bg-main);
    border: 1px solid var(--border);
}

.tarifs-choice-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
}

.tarifs-choice--pass {
    border-color: #28a745;
    background: rgba(40, 167, 69, 0.05);
}

.tarifs-pass-details {
    display: block;
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-top: 0.25rem;
}

.tarifs-choice-separator {
    text-align: center;
    font-weight: 700;
    color: var(--text-secondary);
    padding: 0.25rem 0;
}

.tarifs-mediation-conditions {
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    padding: 1.25rem;
}

.tarifs-mediation-conditions h4 {
    margin: 0 0 0.75rem 0;
    color: var(--text-primary);
}

.tarifs-mediation-docs {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

/* Dark theme pour nouvelles pages tarifs */
body.dark-theme .tarifs-nav-card {
    background: rgba(255, 255, 255, 0.03);
}

body.dark-theme .tarifs-cta-section {
    background: rgba(74, 163, 255, 0.05);
    border-color: rgba(74, 163, 255, 0.15);
}

body.dark-theme .tarifs-list-locations li {
    background: rgba(255, 255, 255, 0.03);
}

body.dark-theme .tarifs-payment-option,
body.dark-theme .tarifs-mediation-conditions,
body.dark-theme .tarifs-distributeur-features {
    background: rgba(255, 255, 255, 0.03);
}

body.dark-theme .tarifs-mediation-box {
    background: rgba(40, 167, 69, 0.08);
}

body.dark-theme .tarifs-choice {
    background: rgba(255, 255, 255, 0.03);
}

/* =========================================
 * RESPONSIVE MOBILE FRIENDLY
 * ========================================= */
@media (max-width: 768px) {
    /* Header mobile */
    #main-header {
        padding: 0.5rem 0.75rem;
    }
    
    .header-logo-link {
        font-size: 1.1rem;
    }
    
    .header-logo {
        width: 28px;
        height: 28px;
    }
    
    /* Navigation dropdowns mobile */
    .header-nav {
        gap: 0.25rem;
    }
    
    .nav-dropdown-toggle {
        padding: 0.5rem 0.6rem;
        font-size: 0.8rem;
    }
    
    .nav-dropdown-toggle svg {
        display: none;
    }
    
    .nav-dropdown-menu {
        min-width: 180px;
        right: 0;
        left: auto;
    }
    
    /* Hero section mobile */
    .hero-section {
        min-height: 180px;
        padding: 1.5rem 1rem 3rem;
    }
    
    .hero-headline {
        font-size: 1.4rem;
        margin-bottom: 1.5rem;
    }
    
    .hero-headline .hero-subtitle {
        margin-top: 0.75rem;
    }
    
    .hero-subtext {
        font-size: 0.9rem;
    }
    
    /* Planner block mobile */
    .planner-block {
        padding: 1rem;
        margin: -1rem 0 1rem;
    }
    
    .planner-block-wrapper {
        margin-top: 1rem;
    }
    
    .itinerary-inputs {
        gap: 0.5rem;
    }
    
    .input-group {
        padding: 0.6rem 0.75rem;
    }
    
    .input-group input {
        font-size: 0.95rem;
    }
    
    /* Services section mobile */
    .services-section {
        padding: 1rem 0.75rem;
    }
    
    .services-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
    
    .service-card {
        padding: 1rem;
    }
    
    .service-icon {
        width: 40px;
        height: 40px;
        font-size: 1.25rem;
    }
    
    .service-title {
        font-size: 0.95rem;
    }
    
    /* Stats section mobile */
    .stats-section {
        padding: 1.5rem 0.75rem;
    }
    
    .stats-container {
        gap: 1rem;
    }
    
    .stat-item {
        min-width: 80px;
    }
    
    .stat-number {
        font-size: 1.5rem;
    }
    
    /* Promo banner mobile */
    .promo-banner {
        margin: 1rem 0.75rem;
        padding: 1rem;
        flex-direction: column;
        text-align: center;
    }
    
    .promo-content h3 {
        font-size: 1rem;
    }
    
    /* Footer mobile - version compacte */
    #site-footer {
        padding: 0;
    }
    
    .footer-content {
        padding: 1rem 0.75rem;
    }
    
    .footer-main {
        display: none; /* Masquer toute la partie principale sur mobile */
    }
    
    .footer-bottom {
        flex-direction: column;
        gap: 0.5rem;
        padding: 0;
        text-align: center;
    }
    
    .footer-independent {
        background: none;
        padding: 0;
        font-size: 0.7rem;
    }
    
    .footer-copyright {
        font-size: 0.7rem;
    }
    
    /* Tarifs page mobile */
    .tarifs-page {
        padding: 1rem 0.75rem;
    }
    
    .tarifs-header h1 {
        font-size: 1.5rem;
    }
    
    .tarifs-card {
        padding: 1.25rem;
    }
    
    .tarifs-section-title {
        font-size: 1.15rem;
    }
    
    .tarifs-buy-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }
    
    .tarifs-feature {
        flex-direction: column;
    }
    
    .tarifs-download-btn {
        width: 100%;
        justify-content: center;
        text-align: center;
    }
    
    .tarifs-info-item {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .tarifs-nav-grid {
        grid-template-columns: 1fr;
    }
    
    .tarifs-app-links {
        flex-direction: column;
    }
    
    .tarifs-app-btn {
        justify-content: center;
    }
    
    .tarifs-payment-option {
        flex-direction: column;
        text-align: center;
    }
    
    .tarifs-feature-benefits {
        flex-wrap: wrap;
        justify-content: center;
    }
    
    /* Map view mobile */
    #map-container {
        height: calc(100vh - 60px);
    }
    
    /* Bottom sheet mobile */
    .bottom-sheet {
        max-height: 70vh;
    }
    
    /* General spacing mobile */
    #dashboard-container {
        padding-bottom: 0;
    }
    
    .card {
        padding: 1rem;
        margin: 0.5rem 0.75rem;
    }
}

@media (max-width: 480px) {
    /* Very small screens */
    .hero-headline {
        font-size: 1.2rem;
    }
    
    .nav-dropdown-toggle {
        padding: 0.4rem 0.5rem;
        font-size: 0.75rem;
    }
    
    .header-logo-link span {
        display: none;
    }
    
    .planner-block {
        margin: -1.5rem 0 0.75rem;
    }
    
    .services-section,
    .stats-section {
        padding: 0.75rem 0.5rem;
    }
    
    .tarifs-card {
        padding: 1rem;
    }
    
    .tarifs-section-title {
        font-size: 1.05rem;
        flex-wrap: wrap;
    }
}


/* =========================================
 * V90: AMÉLIORATIONS MOBILE COMPLÈTES
 * ========================================= */

/* === ÉCHELLE Z-INDEX COHÉRENTE ===
 * Base elements: 1-10
 * Fixed UI: 100-200
 * Dropdowns/Tooltips: 500-600
 * Modals/Overlays: 1000-1100
 * Bottom sheets: 1200-1300
 * Critical alerts: 1400+
 */

/* === 1. POPUP ARRÊT MOBILE OPTIMISÉ === */
@media (max-width: 480px) {
    .stop-schedule-popup .leaflet-popup-content {
        min-width: 260px;
        max-width: 300px;
        max-height: 280px; /* V110: Réduit pour mieux voir sur mobile */
    }
    
    /* V110: Réduire la taille des éléments pour gagner de la place */
    .stop-popup-v105 .popup-line-header {
        padding: 0.625rem 0.875rem;
    }
    
    .stop-popup-v105 .popup-badge {
        min-width: 28px;
        height: 20px;
        font-size: 0.75rem;
    }
    
    .stop-popup-v105 .popup-stop-name {
        font-size: 0.8125rem;
    }
    
    .stop-popup-v105 .popup-dest-row {
        padding: 0.5rem 0.875rem;
    }
    
    .stop-popup-v105 .popup-dest-name {
        font-size: 0.8125rem;
        margin-bottom: 0.375rem;
    }
    
    .stop-popup-v105 .popup-time {
        padding: 0.1875rem 0.375rem;
        font-size: 0.75rem;
    }
    
    .line-departures-group {
        padding: 0.625rem;
    }
    
    .line-header .departure-badge {
        min-width: 28px;
        padding: 0.15rem 0.35rem;
        font-size: 0.7rem;
    }
    
    .line-header .departure-dest {
        font-size: 0.75rem;
    }
    
    .departure-times-list {
        gap: 0.25rem;
    }
    
    .departure-time-chip {
        padding: 0.25rem 0.4rem;
        font-size: 0.75rem;
        min-width: 44px;
    }
    
    .departure-time-chip small {
        font-size: 0.6rem;
    }
}

/* === 2. ZONES TACTILES AGRANDIES (44px min) === */

/* Bouton géolocalisation */
.btn-geolocate {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
}

.btn-geolocate svg {
    width: 18px;
    height: 18px;
}

/* Accordéons horaires - zone cliquable agrandie */
.accordion-group summary {
    min-height: 52px;
    padding: 1rem 1.25rem;
    -webkit-tap-highlight-color: transparent;
}

/* Feedback tactile sur les accordéons */
.accordion-group summary:active {
    background: var(--bg-tertiary);
    transform: scale(0.995);
}

/* Quick actions - feedback tactile */
.quick-action-card {
    min-height: 80px;
    -webkit-tap-highlight-color: transparent;
}

.quick-action-card:active {
    transform: scale(0.97);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

/* Boutons généraux - feedback tactile */
.btn:active {
    transform: scale(0.96);
    transition: transform 0.1s ease;
}

/* Bouton géoloc - NE DOIT JAMAIS BOUGER */
.btn-geolocate,
.btn-geolocate:hover,
.btn-geolocate:active,
.btn-geolocate:focus {
    transform: translateY(-50%) !important;
}

/* Onglets (tabs) - zone tactile */
.tab {
    min-height: 44px;
    padding: 0.75rem 1.25rem;
}

.tab:active {
    background: var(--bg-tertiary);
}

/* News banner - zone cliquable */
.news-banner-link {
    min-height: 36px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* === 3. AUTOCOMPLÉTION MOBILE OPTIMISÉE === */
@media (max-width: 768px) {
    .autocomplete-suggestions,
    #horaires-search-results,
    #from-suggestions,
    #to-suggestions,
    #results-from-suggestions,
    #results-to-suggestions {
        max-height: 45vh;
        border-radius: var(--radius-lg);
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15), 0 8px 30px rgba(0, 0, 0, 0.2);
    }
    
    .autocomplete-item,
    .search-result-item {
        min-height: 52px;
        padding: 0.875rem 1rem;
        display: flex;
        align-items: center;
    }
    
    .autocomplete-item:active,
    .search-result-item:active {
        background: var(--primary);
        color: white;
    }
}

/* === 4. NEWS BANNER MOBILE - V116: Défilement LED sur mobile === */
@media (max-width: 480px) {
    .news-banner {
        flex-wrap: nowrap;
        gap: 0.5rem;
        padding: 0.75rem;
    }
    
    .news-banner-icon {
        width: 32px;
        height: 32px;
        flex-shrink: 0;
    }
    
    .news-banner-icon svg {
        width: 16px;
        height: 16px;
    }
    
    .news-banner-content {
        flex: 1;
        min-width: 0;
        overflow: hidden;
    }
    
    .news-banner-label {
        font-size: 0.65rem;
    }
    
    .news-banner-link {
        padding: 0.3rem 0.6rem;
        font-size: 0.7rem;
        flex-shrink: 0;
    }
    
    /* Garder le défilement actif sur mobile */
    .news-banner-text {
        font-size: 0.8rem;
        white-space: nowrap;
        overflow: hidden;
    }
    
    /* Animation marquee plus rapide sur mobile */
    .news-banner-text.marquee-active .marquee-inner {
        animation-duration: 12s;
    }
}

/* === 5. BOTTOM SHEET APPLE-STYLE COMPLET === */

/* Backdrop amélioré avec blur */
#itinerary-detail-backdrop {
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition: opacity 0.35s cubic-bezier(0.32, 0.72, 0, 1);
}

/* Bottom sheet principal - Apple-style */
@media (max-width: 768px) {
    #detail-bottom-sheet {
        border-radius: 16px 16px 0 0;
        box-shadow: 
            0 -8px 32px rgba(0, 0, 0, 0.12),
            0 -2px 8px rgba(0, 0, 0, 0.08),
            inset 0 1px 0 rgba(255, 255, 255, 0.1);
        transition: 
            transform 0.4s cubic-bezier(0.32, 0.72, 0, 1),
            height 0.35s cubic-bezier(0.32, 0.72, 0, 1);
        will-change: transform, height;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Handle Apple-style */
    #detail-bottom-sheet .panel-handle {
        width: 36px;
        height: 5px;
        border-radius: 3px;
        background: rgba(0, 0, 0, 0.2);
        margin: 8px auto 4px;
        padding: 10px 30px;
        background-clip: content-box;
        cursor: grab;
        transition: background 0.2s ease, transform 0.2s ease;
    }
    
    #detail-bottom-sheet .panel-handle:active,
    #detail-bottom-sheet.is-dragging .panel-handle {
        background: rgba(0, 0, 0, 0.35);
        background-clip: content-box;
        cursor: grabbing;
        transform: scaleX(1.2);
    }
    
    /* Pendant le drag - pas de transition */
    #detail-bottom-sheet.is-dragging {
        transition: none !important;
        will-change: transform, height;
    }
    
    /* Animation d'entrée fluide */
    #itinerary-detail-container.is-active #detail-bottom-sheet {
        transform: translateY(0);
        animation: bottomSheetSlideUp 0.45s cubic-bezier(0.32, 0.72, 0, 1) forwards;
    }
    
    /* État expanded - scroll activé */
    #detail-bottom-sheet.is-expanded {
        border-radius: 12px 12px 0 0;
    }
    
    #detail-bottom-sheet.is-expanded .panel-handle {
        background: rgba(0, 0, 0, 0.12);
        background-clip: content-box;
    }
    
    /* Supprime le texte "Glissez vers le haut" - indicateur handle suffit */
    #detail-bottom-sheet:not(.is-expanded)::after {
        display: none;
    }
    
    /* Panel wrapper avec scroll smooth */
    #detail-panel-wrapper {
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
        overscroll-behavior-y: contain;
    }
    
    /* Indicateur de scroll en haut quand scrollé */
    #itinerary-detail-container.is-scrolled #detail-bottom-sheet::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: var(--border);
        opacity: 0.5;
    }
}

@keyframes bottomSheetSlideUp {
    from {
        transform: translateY(100%);
        opacity: 0.8;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* === 6. DARK MODE COMPLET POUR BOTTOM SHEET === */
body.dark-theme #itinerary-detail-backdrop {
    background: rgba(0, 0, 0, 0.6);
}

body.dark-theme #detail-bottom-sheet {
    background: #0f172a;
    box-shadow: 
        0 -8px 32px rgba(0, 0, 0, 0.4),
        0 -2px 8px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

body.dark-theme #detail-bottom-sheet .panel-handle {
    background: rgba(255, 255, 255, 0.25);
    background-clip: content-box;
}

body.dark-theme #detail-bottom-sheet.is-dragging .panel-handle {
    background: rgba(255, 255, 255, 0.4);
    background-clip: content-box;
}

body.dark-theme #detail-panel-content {
    background: #0f172a;
}

/* === 7. DARK MODE - COMPOSANTS MANQUANTS === */

/* Accordéons horaires */
body.dark-theme .accordion-group summary {
    background: var(--bg-secondary);
}

body.dark-theme .accordion-group summary:hover,
body.dark-theme .accordion-group summary:active {
    background: var(--bg-tertiary);
}

body.dark-theme .accordion-group details[open] summary {
    background: var(--bg-main);
}

body.dark-theme .accordion-content {
    background: var(--bg-main);
}

/* News banner dark */
body.dark-theme .news-banner {
    background: rgba(15, 23, 42, 0.95);
    border-color: rgba(255, 255, 255, 0.08);
}

body.dark-theme .news-banner-icon {
    background: rgba(42, 157, 143, 0.15);
}

body.dark-theme .news-banner-text {
    color: var(--text-primary);
}

/* Autocomplétion dark */
body.dark-theme .autocomplete-suggestions,
body.dark-theme #horaires-search-results {
    background: #0f172a;
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

body.dark-theme .autocomplete-item:hover,
body.dark-theme .search-result-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

body.dark-theme .autocomplete-item:active,
body.dark-theme .search-result-item:active {
    background: var(--primary);
}

/* Planner block dark */
body.dark-theme .planner-block {
    background: rgba(15, 23, 42, 0.95);
    border-color: rgba(255, 255, 255, 0.08);
}

body.dark-theme .planner-block input[type="text"] {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
}

body.dark-theme .planner-block input[type="text"]:focus {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--primary);
}

body.dark-theme .planner-title {
    color: var(--text-primary);
}

body.dark-theme .btn-swap-direction {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
    color: var(--text-secondary);
}

body.dark-theme .btn-swap-direction:hover {
    background: rgba(42, 157, 143, 0.15);
    border-color: #2a9d8f;
    color: #2a9d8f;
}

body.dark-theme .swap-line {
    background: rgba(255, 255, 255, 0.1);
}

/* Bouton "Partir maintenant" dark */
body.dark-theme .btn-when {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
}

body.dark-theme .btn-when:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
}

/* Popover options dark */
body.dark-theme #planner-options-popover,
body.dark-theme #results-planner-options-popover {
    background: #0f172a;
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

body.dark-theme .popover-tab {
    color: var(--text-secondary);
}

body.dark-theme .popover-tab.active {
    color: var(--primary);
    border-color: var(--primary);
}

body.dark-theme .real-select {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
}

/* Étapes itinéraire dark */
body.dark-theme .step-detail {
    border-color: rgba(255, 255, 255, 0.06);
}

body.dark-theme .step-icon {
    background: rgba(255, 255, 255, 0.05);
}

body.dark-theme .step-walk-icon,
body.dark-theme .step-destination-icon {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-secondary);
}

/* Route cards dark */
body.dark-theme .route-card {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.06);
}

body.dark-theme .route-card:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
}

body.dark-theme .route-card.is-selected {
    background: rgba(37, 99, 235, 0.1);
    border-color: var(--primary);
}

/* Filter panel dark mobile */
@media (max-width: 768px) {
    body.dark-theme #route-filter-panel {
        background: #0a0f18;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
    }
}

/* Results side panel dark */
body.dark-theme #results-side-panel {
    background: #0f172a;
}

body.dark-theme .itinerary-edit-header {
    border-color: rgba(255, 255, 255, 0.06);
}

body.dark-theme .itinerary-edit-header h2 {
    color: var(--text-primary);
}

/* Mode tabs dark */
body.dark-theme .mode-tab {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.08);
    color: var(--text-secondary);
}

body.dark-theme .mode-tab:hover {
    background: rgba(255, 255, 255, 0.06);
}

body.dark-theme .mode-tab.active {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

/* === 8. CORRECTIONS PLANNER MOBILE === */
@media (max-width: 768px) {
    .planner-block {
        margin: 0 0 1rem;
        border-radius: var(--radius-lg);
    }
    
    .planner-block .form-group input[type="text"] {
        min-height: 52px;
        font-size: 1rem;
    }
    
    /* Bouton rechercher plus grand sur mobile */
    #planner-submit-btn,
    #results-planner-submit-btn {
        min-height: 52px;
        font-size: 1rem;
        font-weight: 600;
    }
}

/* === 9. AMÉLIORATION SCROLLBAR GLOBALE === */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}

*::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}

*::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.3);
}

body.dark-theme * {
    scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}

body.dark-theme *::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
}

body.dark-theme *::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.25);
}

/* === 10. SAFE AREA IMPROVEMENTS === */
@supports (padding: env(safe-area-inset-bottom)) {
    @media (max-width: 768px) {
        #detail-bottom-sheet {
            padding-bottom: calc(12px + env(safe-area-inset-bottom));
        }
        
        #route-filter-panel {
            padding-bottom: calc(1rem + env(safe-area-inset-bottom));
        }
        
        .results-list {
            padding-bottom: calc(2rem + env(safe-area-inset-bottom));
        }
        
        .autocomplete-suggestions {
            max-height: calc(45vh - env(safe-area-inset-bottom));
        }
    }
}


/* =========================================
 * V91: REDESIGN ITINÉRAIRES - STYLE TBM/SNCF/IDFM
 * Design épuré, minimaliste et moderne
 * ========================================= */

/* === PANNEAU LATÉRAL ÉPURÉ === */
#results-side-panel {
    background: #f8fafc;
}

body.dark-theme #results-side-panel {
    background: #0c1220;
}

/* === EN-TÊTE ITINÉRAIRES MINIMAL === */
.itinerary-edit-header {
    padding: 1rem 1.25rem 0.75rem;
    border-bottom: none;
}

.itinerary-edit-header h2 {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* === PANNEAU DE RECHERCHE COMPACT === */
#itinerary-edit-panel {
    background: transparent;
    padding: 0 1.25rem 1rem;
    border-bottom: 1px solid #e5e7eb;
}

body.dark-theme #itinerary-edit-panel {
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

/* Inputs minimalistes style TBM */
.itinerary-edit-form .form-group input[type="text"],
#results-planner-from,
#results-planner-to {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
    min-height: 44px;
    box-shadow: none;
}

body.dark-theme .itinerary-edit-form .form-group input[type="text"],
body.dark-theme #results-planner-from,
body.dark-theme #results-planner-to {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
}

.itinerary-edit-form .form-group input[type="text"]:focus,
#results-planner-from:focus,
#results-planner-to:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
}

/* Labels ultra discrets */
.itinerary-edit-form .form-group label {
    font-size: 0.65rem;
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* === ONGLETS MODE DE TRANSPORT - STYLE TBM === */
#results-mode-tabs {
    display: flex;
    background: transparent;
    padding: 0.75rem 1rem;
    gap: 0;
    border-bottom: 1px solid #e5e7eb;
}

body.dark-theme #results-mode-tabs {
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

.mode-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0.625rem 0.5rem;
    background: transparent;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.mode-tab::after {
    content: '';
    position: absolute;
    bottom: -0.75rem;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 3px;
    background: #2563eb;
    border-radius: 2px;
    transition: width 0.2s ease;
}

.mode-tab:hover {
    background: rgba(37, 99, 235, 0.04);
}

.mode-tab.active {
    background: rgba(37, 99, 235, 0.08);
}

.mode-tab.active::after {
    width: 24px;
}

.mode-tab svg {
    width: 22px;
    height: 22px;
    color: #64748b;
    transition: color 0.2s ease;
}

.mode-tab.active svg {
    color: #2563eb;
}

.mode-tab-duration {
    font-size: 0.8rem;
    font-weight: 600;
    color: #1e293b;
}

body.dark-theme .mode-tab-duration {
    color: #e2e8f0;
}

.mode-tab.active .mode-tab-duration {
    color: #2563eb;
}

.mode-tab-duration.empty {
    color: #94a3b8;
    font-weight: 500;
}

/* === LISTE DES RÉSULTATS AÉRÉE === */
.results-list {
    padding: 0.75rem;
    background: transparent;
}

/* === TITRES DE SECTION DISCRETS === */
.route-option-title {
    font-size: 0.7rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 1rem 0.5rem 0.5rem;
    padding: 0;
}

body.dark-theme .route-option-title {
    color: #94a3b8;
}

/* === CARTES ITINÉRAIRES - DESIGN TBM/IDFM === */
.route-option {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 1rem;
    margin-bottom: 0.625rem;
    cursor: pointer;
    transition: all 0.15s ease;
    gap: 0.625rem;
}

.route-option:hover {
    border-color: #cbd5e1;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.route-option.is-active {
    border-color: #2563eb;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.12);
    background: #fafbff;
}

body.dark-theme .route-option {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.06);
}

body.dark-theme .route-option:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
}

body.dark-theme .route-option.is-active {
    background: rgba(37, 99, 235, 0.1);
    border-color: #2563eb;
}

/* === LIGNE DE RÉSUMÉ - BADGES ÉLÉGANTS === */
.route-summary-line {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex-wrap: wrap;
}

/* Icône mode transport (bus/vélo/marche) */
.route-summary-bus-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: #f1f5f9;
    border: none;
    color: #64748b;
    font-size: 0;
    padding: 0;
}

.route-summary-bus-icon svg {
    width: 16px;
    height: 16px;
}

body.dark-theme .route-summary-bus-icon {
    background: rgba(255, 255, 255, 0.08);
    color: #94a3b8;
}

/* Icône marche inline */
.route-summary-walk-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
}

.route-summary-walk-icon svg {
    width: 16px;
    height: 16px;
}

/* Séparateur point */
.route-summary-dot {
    color: #cbd5e1;
    font-size: 0.5rem;
    margin: 0 0.125rem;
}

body.dark-theme .route-summary-dot {
    color: rgba(255, 255, 255, 0.2);
}

/* === BADGES DE LIGNE - STYLE MODERNE TBM/SNCF === */
.route-line-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.8rem;
    border-radius: 6px;
    min-width: 36px;
    height: 26px;
    padding: 0 0.5rem;
    box-shadow: none;
    letter-spacing: 0.02em;
}

/* === FOOTER - HORAIRES ET DURÉE === */
.route-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.25rem;
}

.route-time {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1e293b;
    letter-spacing: -0.01em;
}

body.dark-theme .route-time {
    color: #f1f5f9;
}

.route-duration {
    font-size: 0.9rem;
    font-weight: 600;
    color: #64748b;
}

body.dark-theme .route-duration {
    color: #94a3b8;
}

/* Durée éco - vert TBM */
.route-duration-eco {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: #059669;
    font-weight: 700;
}

.route-duration-eco svg {
    width: 14px;
    height: 14px;
}

/* === SECTION "AUSSI À" - TRÈS DISCRÈTE === */
.route-next-departures {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex-wrap: wrap;
    padding-top: 0.625rem;
    margin-top: 0.625rem;
    border-top: 1px solid #f1f5f9;
    font-size: 0.75rem;
}

body.dark-theme .route-next-departures {
    border-top-color: rgba(255, 255, 255, 0.04);
}

.next-departures-label {
    font-weight: 500;
    color: #94a3b8;
}

.next-departures-time {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.5rem;
    background: #f1f5f9;
    border-radius: 4px;
    font-weight: 600;
    color: #475569;
}

body.dark-theme .next-departures-time {
    background: rgba(255, 255, 255, 0.06);
    color: #94a3b8;
}

.next-departures-more {
    color: #94a3b8;
    font-weight: 500;
}

/* === BOUTONS ÉPURÉS === */
.btn-full-width {
    background: #2563eb;
    color: white;
    border: none;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
    font-weight: 600;
    transition: background 0.15s ease;
}

.btn-full-width:hover {
    background: #1d4ed8;
}

/* Bouton "Charger plus" */
.load-more-wrapper {
    padding: 0.75rem;
}

.load-more-wrapper .btn,
.load-more-departures .btn {
    background: transparent;
    border: 1px solid #e5e7eb;
    color: #475569;
    border-radius: 8px;
    padding: 0.625rem 1rem;
    font-size: 0.85rem;
    font-weight: 500;
    width: 100%;
    justify-content: center;
}

.load-more-wrapper .btn:hover,
.load-more-departures .btn:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
}

body.dark-theme .load-more-wrapper .btn,
body.dark-theme .load-more-departures .btn {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.1);
    color: #94a3b8;
}

body.dark-theme .load-more-wrapper .btn:hover,
body.dark-theme .load-more-departures .btn:hover {
    background: rgba(255, 255, 255, 0.04);
}

/* === BOUTON QUAND - STYLE SNCF === */
.btn-when,
.btn-when-inline {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    color: #1e293b;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-when:hover,
.btn-when-inline:hover {
    border-color: #cbd5e1;
    background: #fafafa;
}

body.dark-theme .btn-when,
body.dark-theme .btn-when-inline {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
    color: #e2e8f0;
}

.btn-when svg,
.btn-when-inline svg {
    color: #94a3b8;
    width: 18px;
    height: 18px;
}

/* === MOBILE SPÉCIFIQUE === */
@media (max-width: 768px) {
    #results-side-panel {
        background: #f8fafc;
    }
    
    body.dark-theme #results-side-panel {
        background: #0a0f18;
    }
    
    .itinerary-edit-header {
        padding: 0.875rem 1rem 0.5rem;
    }
    
    .itinerary-edit-header h2 {
        font-size: 1.125rem;
    }
    
    #itinerary-edit-panel {
        padding: 0 1rem 0.875rem;
    }
    
    #results-mode-tabs {
        padding: 0.625rem 0.75rem;
    }
    
    .mode-tab {
        padding: 0.5rem 0.25rem;
    }
    
    .mode-tab svg {
        width: 20px;
        height: 20px;
    }
    
    .mode-tab-duration {
        font-size: 0.75rem;
    }
    
    .results-list {
        padding: 0.5rem;
    }
    
    .route-option {
        padding: 0.875rem;
        margin-bottom: 0.5rem;
        border-radius: 10px;
    }
    
    .route-line-badge {
        min-width: 32px;
        height: 24px;
        font-size: 0.75rem;
        border-radius: 5px;
    }
    
    .route-time {
        font-size: 0.9rem;
    }
    
    .route-duration {
        font-size: 0.85rem;
    }
}

/* =========================================
 * V93: REDESIGN INTERFACE ÉPURÉE
 * Design moderne style Apple/Citymapper/TBM
 * ========================================= */

/* === ONGLETS DE TRANSPORT PREMIUM === */
#results-mode-tabs {
    display: flex;
    background: #ffffff;
    padding: 0.5rem;
    gap: 0.25rem;
    border-bottom: none;
    margin: 0 0.75rem;
    border-radius: 14px;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}

body.dark-theme #results-mode-tabs {
    background: rgba(255, 255, 255, 0.04);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.mode-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.125rem;
    padding: 0.5rem 0.375rem;
    background: transparent;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.mode-tab::after {
    display: none;
}

.mode-tab:hover {
    background: rgba(0, 0, 0, 0.04);
}

body.dark-theme .mode-tab:hover {
    background: rgba(255, 255, 255, 0.06);
}

.mode-tab.active {
    background: #2563eb;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
}

body.dark-theme .mode-tab.active {
    background: #3b82f6;
    box-shadow: 0 2px 12px rgba(59, 130, 246, 0.4);
}

.mode-tab svg {
    width: 20px;
    height: 20px;
    color: #64748b;
    transition: all 0.2s ease;
}

body.dark-theme .mode-tab svg {
    color: #94a3b8;
}

.mode-tab.active svg {
    color: #ffffff;
}

.mode-tab-duration {
    font-size: 0.7rem;
    font-weight: 600;
    color: #64748b;
    letter-spacing: -0.01em;
}

body.dark-theme .mode-tab-duration {
    color: #94a3b8;
}

.mode-tab.active .mode-tab-duration {
    color: rgba(255, 255, 255, 0.95);
}

.mode-tab-duration.empty {
    opacity: 0.5;
}

/* === CARTES ITINÉRAIRES GLASSMORPHISM === */
.route-option {
    background: #ffffff;
    border: none;
    border-radius: 16px;
    padding: 1rem 1.125rem;
    margin-bottom: 0.5rem;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.03);
}

.route-option:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
}

.route-option:active {
    transform: translateY(0);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.route-option.is-active {
    background: linear-gradient(135deg, #eff6ff 0%, #f0f9ff 100%);
    box-shadow: 0 0 0 2px #2563eb, 0 4px 12px rgba(37, 99, 235, 0.15);
}

body.dark-theme .route-option {
    background: rgba(255, 255, 255, 0.03);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

body.dark-theme .route-option:hover {
    background: rgba(255, 255, 255, 0.05);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

body.dark-theme .route-option.is-active {
    background: rgba(37, 99, 235, 0.15);
    box-shadow: 0 0 0 2px #3b82f6, 0 4px 16px rgba(59, 130, 246, 0.25);
}

/* === LIGNE DE RÉSUMÉ AMÉLIORÉE === */
.route-summary-line {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex-wrap: wrap;
}

/* Icône vélo */
.route-summary-bike-icon {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%) !important;
    color: #059669 !important;
}

body.dark-theme .route-summary-bike-icon {
    background: rgba(5, 150, 105, 0.15) !important;
    color: #34d399 !important;
}

/* Icône marche seule (trajet 100% à pied) */
.route-summary-walk-only-icon {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%) !important;
    color: #d97706 !important;
}

body.dark-theme .route-summary-walk-only-icon {
    background: rgba(217, 119, 6, 0.15) !important;
    color: #fbbf24 !important;
}

/* Labels type trajet */
.route-type-label {
    font-weight: 600;
    font-size: 0.875rem;
    color: #1e293b;
}

body.dark-theme .route-type-label {
    color: #f1f5f9;
}

.route-type-distance {
    font-size: 0.8rem;
    color: #64748b;
    margin-left: 0.25rem;
}

body.dark-theme .route-type-distance {
    color: #94a3b8;
}

/* Icône mode transport moderne - supprimée pour style IDFM pur */
.route-summary-bus-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: linear-gradient(135deg, #eff6ff 0%, #e0f2fe 100%);
    border: none;
    color: #2563eb;
    padding: 0;
}

.route-summary-bus-icon svg {
    width: 16px;
    height: 16px;
}

body.dark-theme .route-summary-bus-icon {
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
}

/* Icône marche inline (fin de trajet bus) */
.route-summary-walk-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: rgba(148, 163, 184, 0.15);
    color: #64748b;
}

.route-summary-walk-icon svg {
    width: 14px;
    height: 14px;
}

body.dark-theme .route-summary-walk-icon {
    background: rgba(148, 163, 184, 0.1);
    color: #94a3b8;
}

/* Séparateur point style IDFM */
.route-summary-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    font-size: 0.5rem;
    margin: 0 0.25rem;
    font-weight: 700;
}

body.dark-theme .route-summary-dot {
    color: #64748b;
}

/* === BADGES DE LIGNE PREMIUM === */
.route-line-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.75rem;
    border-radius: 8px;
    min-width: 40px;
    height: 28px;
    padding: 0 0.625rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

/* === HORAIRES ET DURÉE === */
.route-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.625rem;
    padding-top: 0.5rem;
}

.route-time {
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

body.dark-theme .route-time {
    color: #f8fafc;
}

.route-duration {
    font-size: 0.875rem;
    font-weight: 600;
    color: #64748b;
    font-variant-numeric: tabular-nums;
}

body.dark-theme .route-duration {
    color: #94a3b8;
}

/* Durée éco avec gradient */
.route-duration-eco {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: #059669;
    font-weight: 700;
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    padding: 0.25rem 0.625rem;
    border-radius: 6px;
}

body.dark-theme .route-duration-eco {
    background: rgba(5, 150, 105, 0.15);
    color: #34d399;
}

.route-duration-eco svg {
    width: 12px;
    height: 12px;
}

/* === SECTION "AUSSI À" MODERNISÉE === */
.route-next-departures {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex-wrap: wrap;
    padding-top: 0.625rem;
    margin-top: 0.5rem;
    border-top: 1px solid rgba(0, 0, 0, 0.04);
    font-size: 0.75rem;
}

body.dark-theme .route-next-departures {
    border-top-color: rgba(255, 255, 255, 0.04);
}

.next-departures-label {
    font-weight: 500;
    color: #94a3b8;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.next-departures-time {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.5rem;
    background: #f1f5f9;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.7rem;
    color: #475569;
    font-variant-numeric: tabular-nums;
}

body.dark-theme .next-departures-time {
    background: rgba(255, 255, 255, 0.06);
    color: #cbd5e1;
}

.next-departures-more {
    color: #2563eb;
    font-weight: 600;
    font-size: 0.7rem;
}

body.dark-theme .next-departures-more {
    color: #60a5fa;
}

/* === TITRES DE SECTION DISCRETS === */
.route-option-title {
    font-size: 0.65rem;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 0.75rem 0.25rem 0.5rem;
    padding: 0;
}

body.dark-theme .route-option-title {
    color: #64748b;
}

/* === BOUTON QUAND PREMIUM === */
.btn-when,
.btn-when-inline {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #1e293b;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    cursor: pointer;
    transition: all 0.15s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.btn-when:hover,
.btn-when-inline:hover {
    background: #f8fafc;
    border-color: rgba(0, 0, 0, 0.12);
}

body.dark-theme .btn-when,
body.dark-theme .btn-when-inline {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
    color: #e2e8f0;
}

body.dark-theme .btn-when:hover,
body.dark-theme .btn-when-inline:hover {
    background: rgba(255, 255, 255, 0.06);
}

.btn-when svg,
.btn-when-inline svg {
    color: #94a3b8;
    width: 18px;
    height: 18px;
    transition: transform 0.2s ease;
}

.btn-when:hover svg,
.btn-when-inline:hover svg {
    transform: translateY(1px);
}

/* === BOUTONS D'ACTION MODERNES === */
.load-more-wrapper {
    padding: 0.5rem;
}

.load-more-wrapper .btn,
.load-more-departures .btn {
    background: transparent;
    border: 1px dashed rgba(0, 0, 0, 0.12);
    color: #64748b;
    border-radius: 12px;
    padding: 0.75rem 1rem;
    font-size: 0.8rem;
    font-weight: 600;
    width: 100%;
    justify-content: center;
    transition: all 0.15s ease;
}

.load-more-wrapper .btn:hover,
.load-more-departures .btn:hover {
    background: rgba(37, 99, 235, 0.04);
    border-color: #2563eb;
    border-style: solid;
    color: #2563eb;
}

body.dark-theme .load-more-wrapper .btn,
body.dark-theme .load-more-departures .btn {
    border-color: rgba(255, 255, 255, 0.1);
    color: #94a3b8;
}

body.dark-theme .load-more-wrapper .btn:hover,
body.dark-theme .load-more-departures .btn:hover {
    background: rgba(59, 130, 246, 0.1);
    border-color: #3b82f6;
    color: #60a5fa;
}

/* === RÉSULTATS LISTE AÉRÉE === */
.results-list {
    padding: 0.5rem 0.75rem 1rem;
    background: transparent;
}

/* === PANNEAU LATÉRAL MODERNE === */
#results-side-panel {
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
}

body.dark-theme #results-side-panel {
    background: linear-gradient(180deg, #0c1220 0%, #0a0f18 100%);
}

/* === INPUT RECHERCHE PREMIUM === */
.itinerary-edit-form .form-group input[type="text"],
#results-planner-from,
#results-planner-to {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    padding: 0.875rem 1rem;
    font-size: 0.9rem;
    font-weight: 500;
    min-height: 48px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    transition: all 0.15s ease;
}

.itinerary-edit-form .form-group input[type="text"]:focus,
#results-planner-from:focus,
#results-planner-to:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1), 0 1px 2px rgba(0, 0, 0, 0.04);
    outline: none;
}

body.dark-theme .itinerary-edit-form .form-group input[type="text"],
body.dark-theme #results-planner-from,
body.dark-theme #results-planner-to {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
    color: #f1f5f9;
}

body.dark-theme .itinerary-edit-form .form-group input[type="text"]:focus,
body.dark-theme #results-planner-from:focus,
body.dark-theme #results-planner-to:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

/* === BOUTON LANCER RECHERCHE === */
#planner-submit-btn,
#results-planner-submit-btn {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    color: white;
    border: none;
    border-radius: 12px;
    padding: 0.875rem 1.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
}

#planner-submit-btn:hover,
#results-planner-submit-btn:hover {
    background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4);
    transform: translateY(-1px);
}

#planner-submit-btn:active,
#results-planner-submit-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(37, 99, 235, 0.3);
}

/* === ANIMATIONS DOUCES === */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.route-option-wrapper {
    animation: fadeInUp 0.25s ease-out;
}

.route-option-wrapper:nth-child(2) { animation-delay: 0.03s; }
.route-option-wrapper:nth-child(3) { animation-delay: 0.06s; }
.route-option-wrapper:nth-child(4) { animation-delay: 0.09s; }
.route-option-wrapper:nth-child(5) { animation-delay: 0.12s; }

/* === RESPONSIVE MOBILE V93 === */
@media (max-width: 768px) {
    #results-mode-tabs {
        margin: 0 0.5rem;
        padding: 0.375rem;
        border-radius: 12px;
    }
    
    .mode-tab {
        padding: 0.375rem 0.25rem;
        border-radius: 8px;
    }
    
    .mode-tab svg {
        width: 18px;
        height: 18px;
    }
    
    .mode-tab-duration {
        font-size: 0.65rem;
    }
    
    .results-list {
        padding: 0.375rem 0.5rem 1rem;
    }
    
    .route-option {
        padding: 0.875rem 1rem;
        margin-bottom: 0.375rem;
        border-radius: 14px;
    }
    
    .route-summary-bus-icon {
        width: 26px;
        height: 26px;
        border-radius: 7px;
    }
    
    .route-summary-bus-icon svg {
        width: 14px;
        height: 14px;
    }
    
    .route-line-badge {
        min-width: 36px;
        height: 26px;
        font-size: 0.7rem;
        border-radius: 7px;
    }
    
    .route-time {
        font-size: 0.95rem;
    }
    
    .route-duration {
        font-size: 0.8rem;
    }
    
    .route-next-departures {
        gap: 0.25rem;
    }
    
    .next-departures-time {
        padding: 0.2rem 0.375rem;
        font-size: 0.65rem;
    }
    
    .btn-when,
    .btn-when-inline {
        border-radius: 10px;
        padding: 0.625rem 0.875rem;
    }
}