/* static/style.css - */

:root {
    --flix-green-accent: #36c200;
    --flix-green-hover: #45d010;
    --flix-green-subtle-bg: rgba(54, 194, 0, 0.08);
    --flix-green-animated-wave: #e6f5e1;

    --blablacar-blue-accent: #0070d2;
    --blablacar-blue-hover: #0056a3;
    --blablacar-blue-subtle-bg: rgba(0, 112, 210, 0.08);

    --bg-main: #fdfcfb;
    --bg-panel-static: #f9f7f5;
    --bg-card: #ffffff;   
    
    --border-light: #e8e4e0;
    --border-medium: #dcd7d3;

    --text-dark: #333740;
    --text-medium: #555b66;
    --text-light: #777e8c;

    --input-bg: #ffffff;
    --input-border: #d1ccc7;

    --box-shadow-soft: rgba(0, 0, 0, 0.05);
    --box-shadow-medium: rgba(0, 0, 0, 0.1);

    --border-radius-main: 5px;
    --font-main: 'Nunito Sans', 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;

    --wave-neutral-1: #f5f2ef; 
    --wave-neutral-2: #ede9e5; 
    --animated-wave-blue: #e1e8f5;

    /* VOS COULEURS POUR LES BARRES (remplacez par les vraies valeurs !) */
    --strakaza-color-1: #8A2BE2; /* Exemple Violet */
    --strakaza-color-2: #0000FF; /* Exemple Bleu */
    --strakaza-color-3: #00FF00; /* Exemple Vert */
    --strakaza-color-4: #FFA500; /* Exemple Orange */
    --strakaza-color-5: #FF0000; /* Exemple Rouge */
}

@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300;400;600;700&display=swap');

/* --- KEYFRAME DEFINITIONS --- */
@keyframes animatedPaperWaveWithGreen {
    0% { background-position: 0% 50%; } 
    50% { background-position: 100% 50%; } 
    100% { background-position: 0% 50%; }
}

@keyframes animatedBorderGlow {
    0%, 100% {
        border-color: var(--flix-green-accent);
        box-shadow: 0 0 7px rgba(54, 194, 0, 0.6), 0 0 12px rgba(54, 194, 0, 0.4);
    }
    50% {
        border-color: var(--blablacar-blue-accent);
        box-shadow: 0 0 7px rgba(0, 112, 210, 0.6), 0 0 12px rgba(0, 112, 210, 0.4);
    }
}

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

/* --- GENERAL STYLES --- */
html, body {
    height: 100%; margin: 0; padding: 0; overflow: hidden;
    font-family: var(--font-main); background-color: var(--bg-main);
    color: var(--text-dark); font-size: 15px; line-height: 1.6;
}

.app-layout { display: flex; height: 100vh; width: 100vw; position: relative; }

/* --- SIDEBAR STYLES --- */
.sidebar-panel {
    width: 370px; min-width: 370px; border-right: 1px solid var(--border-light);
    box-shadow: 2px 0 6px var(--box-shadow-soft); display: flex; flex-direction: column;
    transition: min-width 0.3s ease, width 0.3s ease, transform 0.3s ease;
    z-index: 900; position: relative; overflow: hidden;
    background: linear-gradient( 130deg, var(--wave-neutral-1), var(--animated-wave-green), 
                                var(--wave-neutral-2), var(--animated-wave-blue), var(--wave-neutral-1) );
    background-size: 500% 500%;
    animation: animatedPaperWaveWithGreen 35s linear infinite;
}
.sidebar-content-wrapper {
    padding: 1.2rem; overflow-y: auto; overflow-x: hidden; flex-grow: 1;
    display: flex; flex-direction: column; gap: 1.2rem; opacity: 1;
    transition: opacity 0.15s ease; position: relative; z-index: 1;
    background-color: transparent;
}
.sidebar-panel.collapsed { width: 0; min-width: 0; border-right: none; }
.sidebar-panel.collapsed .sidebar-content-wrapper { opacity: 0; pointer-events: none; }

.toggle-sidebar-button {
    position: fixed; top: 12px; left: 382px; z-index: 1001;
    background-color: var(--bg-card); color: var(--text-medium);
    border: 1px solid var(--border-medium); padding: 9px 11px;
    cursor: pointer; border-radius: var(--border-radius-main);
    box-shadow: 0 1px 4px var(--box-shadow-soft); font-size: 1.1rem;
    line-height: 1;
    transition: left 0.3s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.3s ease;
}
.toggle-sidebar-button:hover {
    background-color: var(--flix-green-subtle-bg);
    color: var(--flix-green-accent); border-color: var(--flix-green-accent);
}
body.sidebar-visible .toggle-sidebar-button { left: calc(370px + 12px); }

.sidebar-header {
    /* padding-bottom: 1rem; */ /* Original padding-bottom, ajusté plus bas */
    /* border-bottom: 1px solid var(--border-light); */ /* MODIFIÉ : Supprimé pour les barres de couleur */
    border-bottom: none; /* Assurez-vous que la bordure est bien enlevée */
    flex-shrink: 0;
    background-color: var(--bg-card); 
    padding: 1rem; /* Padding original */
    padding-bottom: 0.5rem; /* Réduire le padding du bas pour compenser l'absence de bordure et l'ajout des barres */
    margin: -1.2rem -0.8rem 0; 
    box-shadow: 0 2px 4px var(--box-shadow-soft);
    /* text-align: left; */ /* Par défaut, ou center si vous préférez */
}
.sidebar-header h1 {
    margin: 0; 
    font-size: 1.5rem; 
    font-weight: 700;
    color: var(--text-dark); 
    letter-spacing: -0.5px;
    /* text-align: left; */ /* Par défaut, ou center si vous préférez */
}

/* --- BARRES DE COULEUR SOUS LE TITRE --- */
.color-bars-underline {
    display: flex;
    /* justify-content: center; */ /* Décommentez si H1 est centré */
    height: 4px; 
    margin-top: 10px; /* Espace entre le H1 et les barres */
    margin-bottom: 10px; /* Espace après les barres, avant le prochain élément */
                            /* (ajustez par rapport au padding-bottom du .sidebar-header) */
}

.color-bars-underline .color-bar {
    display: block;
    flex-grow: 1; /* Pour que les barres prennent la largeur disponible et se partagent l'espace */
    max-width: 50px; /* Limite la largeur de chaque barre, ajustez */
    /* Si vous préférez une largeur fixe : width: 40px; et ajustez justify-content du parent */
}
/* Application des couleurs spécifiques (vous pouvez aussi le faire en HTML avec style="") */
.color-bars-underline .color-bar:nth-child(1) { background-color: var(--strakaza-color-1); }
.color-bars-underline .color-bar:nth-child(2) { background-color: var(--strakaza-color-2); }
.color-bars-underline .color-bar:nth-child(3) { background-color: var(--strakaza-color-3); }
.color-bars-underline .color-bar:nth-child(4) { background-color: var(--strakaza-color-4); }
.color-bars-underline .color-bar:nth-child(5) { background-color: var(--strakaza-color-5); }


.search-section, #routeListSection, .download-section { flex-shrink: 0; }
.sidebar-panel article {
    padding: 1.2rem; border-radius: var(--border-radius-main);
    background-color: var(--bg-card); border: 1px solid var(--border-light);
    box-shadow: 0 2px 5px var(--box-shadow-soft);
}
.sidebar-panel article h2, 
.sidebar-panel #routeListArticle h3, 
.download-section h3 { 
    font-size: 1.15rem; font-weight: 600; color: var(--text-dark);
    margin-bottom: 1rem; 
    padding-bottom: 0.4rem; 
    border-bottom: 1px solid var(--border-light); 
}
.search-section article h2 {
    border-bottom: 1px solid var(--border-light); 
    padding-bottom: 0.4rem;
}
.sidebar-panel label {
    display: block; margin-bottom: 0.6rem; font-weight: 600;
    font-size: 0.9rem; color: var(--text-medium);
}
.form-help-text {
    font-size: 0.8rem; color: var(--text-light);
    margin-top: 0.5rem; margin-bottom: 0; text-align: left;
}

.map-panel { flex-grow: 1; height: 100%; position: relative; }
#map { width: 100%; height: 100%; border: none; }

/* Spinner de chargement */
.spinner {
    border: 4px solid rgba(200, 200, 200, 0.2); 
    border-left-color: var(--flix-green-accent);
    border-radius: 50%; width: 24px; height: 24px;
    animation: spin 0.8s linear infinite;
}
.autocomplete-container { position: relative; display: flex; align-items: center; }
#searchSpinner.spinner {
    width: 20px; height: 20px; border-width: 3px; margin-left: 10px; flex-shrink: 0;
}
.loading-indicator-container {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 1rem; margin-bottom: 1rem;
}
.loading-indicator-container .spinner {
    width: 30px; height: 30px; border-width: 4px; margin-bottom: 0.5rem;
}
.loading-indicator-container p { margin: 0; font-size: 0.9rem; color: var(--text-medium); }

/* Input et suggestions */
input[type="text"]#stopNameInput {
  box-sizing: border-box; width: 100%; padding: 0.8rem 1rem;
  border: 1px solid var(--input-border); 
  border-radius: var(--border-radius-main);
  font-size: 0.95rem; line-height: 1.5;
  background-color: var(--input-bg); color: var(--text-dark);
  transition: border-color 0.3s ease, box-shadow 0.3s ease; 
}
input[type="text"]#stopNameInput::placeholder { color: var(--text-light); opacity: 0.8; }
input[type="text"]#stopNameInput:hover,
input[type="text"]#stopNameInput:focus {
  outline: 0; 
  animation: animatedBorderGlow 2s ease-in-out infinite;
}

.suggestions-dropdown {
    position: absolute; border: 1px solid var(--input-border); border-top: none;
    z-index: 999; top: 100%; left: 0; right: 0;
    background-color: var(--bg-card); max-height: 220px; overflow-y: auto;
    box-shadow: 0 3px 7px var(--box-shadow-medium);
    border-radius: 0 0 var(--border-radius-main) var(--border-radius-main);
}
.suggestions-dropdown div {
    padding: 0.8rem 1rem; cursor: pointer; border-bottom: 1px solid var(--border-light);
    font-size: 0.9rem; color: var(--text-medium);
    transition: background-color 0.15s ease, color 0.15s ease;
}
.suggestions-dropdown div:last-child { border-bottom: none; }
.suggestions-dropdown div:hover { background-color: #f0f0f0; color: var(--text-dark); }
.suggestions-dropdown:empty { display: none; }

/* Bouton toggle itinéraires */
.toggle-button {
    background-color: var(--bg-card); border: 1px solid var(--border-medium);
    color: var(--text-medium); padding: 0.7rem 1rem; cursor: pointer;
    text-align: left; border-radius: var(--border-radius-main);
    font-weight: 600; font-size: 0.95rem; 
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    width: 100%; margin-bottom: 0.5rem;
    box-shadow: 0 1px 2px var(--box-shadow-soft);
}
.toggle-button:hover { background-color: #e9ecef; border-color: #ced4da; color: var(--text-dark); }
#routeListSection.collapsed > article#routeListArticle { display: none; }

/* Légende opérateurs */
.operator-legend {
    display: flex; gap: 15px; margin-bottom: 0.8rem; 
    padding: 0.6rem 0.8rem; 
    background-color: rgba(255,255,255,0.5); 
    border-radius: var(--border-radius-main);
    border: 1px solid var(--border-light);
    font-size: 0.8rem; justify-content: center; flex-wrap: wrap;
}
.legend-item { display: flex; align-items: center; color: var(--text-medium); }
.legend-color-box {
    display: inline-block; width: 12px; height: 12px;
    margin-right: 6px; border-radius: 3px;
    border: 1px solid rgba(0,0,0,0.1);
}
.legend-flixbus { background-color: var(--flix-green-accent); }
.legend-blablacar { background-color: var(--blablacar-blue-accent); }

/* Liste des itinéraires avec accent de couleur à gauche */
#routeList ul { list-style: none; padding: 0; margin: 0; }
#routeList li.route-item {
    padding: 0.9rem 1rem; margin-bottom: 0.6rem;
    border: 1px solid var(--border-light);
    border-left-width: 4px; border-left-style: solid;
    border-radius: var(--border-radius-main); cursor: pointer;
    transition: background-color 0.2s ease, border-left-color 0.2s ease, transform 0.1s ease-out;
    font-size: 0.9rem; color: var(--text-medium);
    background-color: var(--bg-card);
}
#routeList li.route-item:last-child { margin-bottom: 0; }
#routeList li.route-item--flixbus { border-left-color: var(--flix-green-accent); }
#routeList li.route-item--flixbus:hover {
    background-color: var(--flix-green-subtle-bg);
    border-left-color: var(--flix-green-hover); 
    color: var(--text-dark); transform: translateX(3px);
}
#routeList li.route-item--blablacar-bus { border-left-color: var(--blablacar-blue-accent); }
#routeList li.route-item--blablacar-bus:hover {
    background-color: var(--blablacar-blue-subtle-bg);
    border-left-color: var(--blablacar-blue-hover);
    color: var(--text-dark); transform: translateX(3px);
}
#routeList li.route-item--unknown { border-left-color: var(--text-light); }
#routeList li.route-item--unknown:hover {
    background-color: #f0f0f0; border-left-color: var(--text-medium);
    color: var(--text-dark); transform: translateX(3px);
}
#routeList li.route-item strong { font-weight: 600; color: var(--text-dark); }

/* Section de téléchargement */
.download-section article { margin-top: 1.5rem; }
.data-source-info, .data-license-info {
    font-size: 0.85rem; color: var(--text-medium); margin-bottom: 0.5rem; line-height: 1.4;
}
.data-source-info a, .data-license-info a {
    color: var(--flix-green-accent); text-decoration: none;
}
.data-source-info a:hover, .data-license-info a:hover {
    color: var(--flix-green-hover); text-decoration: underline;
}
a.button.download-button {
    display: inline-block; text-decoration: none; background-color: var(--flix-green-accent);
    color: white !important; 
    padding: 0.7rem 1.2rem; border-radius: var(--border-radius-main); text-align: center;
    font-weight: 600; font-size: 0.9rem; margin-top: 0.5rem; margin-bottom: 0.5rem;
    transition: background-color 0.2s ease; border: none;
}
a.button.download-button:hover { background-color: var(--flix-green-hover); color: white !important; }

/* --- CITATION EN BAS DE LA BARRE LATÉRALE --- */
.sidebar-footer-quote {
    text-align: center;
    padding: 15px 0;
    margin-top: auto; /* Pousse le footer vers le bas */
    font-size: 0.85rem;
    color: var(--text-light);
    font-style: italic;
    border-top: 1px solid var(--border-light); /* Ligne de séparation optionnelle */
    flex-shrink: 0; /* Empêche de rétrécir si le contenu est plus grand */
}

.sidebar-footer-quote p {
    margin: 0;
}

/* Toasts */
.toast-container {
    position: fixed; bottom: 20px; right: 20px; z-index: 1050;
    display: flex; flex-direction: column-reverse; gap: 10px;
}
.toast {
    background-color: #333740; color: #fdfcfb; 
    padding: 12px 20px; border-radius: var(--border-radius-main);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2); opacity: 0;
    transform: translateX(100%); transition: opacity 0.4s ease, transform 0.4s ease;
    font-size: 0.9rem; max-width: 320px;
}
.toast.show { opacity: 0.95; transform: translateX(0); }
.toast.toast-error { background-color: #c0392b; color: white; }
.toast.toast-success { background-color: var(--flix-green-accent); color: white; }
.toast.toast-info { background-color: #2980b9; color: white; }
.toast.toast-warning { background-color: #f39c12; color: white; }

/* Messages d'erreur/info dans le panneau */
.error-message, .info-message {
    padding: 0.8rem 1rem; margin-top: 0.8rem;
    border-radius: var(--border-radius-main); font-size: 0.9rem;
    border: 1px solid; text-align: left;
}
.error-message { color: #842029; background-color: #f8d7da; border-color: #f5c2c7; }
.info-message { color: #055160; background-color: #cff4fc; border-color: #b6effb; }

/* Contrôles Leaflet */
.leaflet-control-attribution {
    font-size: 0.75rem !important; background: rgba(255, 255, 255, 0.75) !important;
    color: var(--text-light) !important;
}
.leaflet-control-attribution a { color: var(--flix-green-accent) !important; }
.leaflet-bar a, .leaflet-bar a:hover {
    background-color: var(--bg-card); border-bottom: 1px solid var(--border-light);
    color: var(--text-dark); border-radius: var(--border-radius-main);
    width: 32px; height: 32px; line-height: 32px;
}
.leaflet-bar a:hover { background-color: #f0f0f0; color: var(--text-dark); }
.leaflet-bar {
    box-shadow: 0 1px 4px var(--box-shadow-soft);
    border-radius: var(--border-radius-main); border: 1px solid var(--border-light);
}
.leaflet-control-zoom { margin-top: calc(12px + 40px + 12px + 10px) !important;  }

/* Scrollbars */
.sidebar-content-wrapper::-webkit-scrollbar,
.suggestions-dropdown::-webkit-scrollbar { width: 8px; }
.sidebar-content-wrapper::-webkit-scrollbar-track,
.suggestions-dropdown::-webkit-scrollbar-track { background: var(--bg-panel-static); }
.sidebar-content-wrapper::-webkit-scrollbar-thumb,
.suggestions-dropdown::-webkit-scrollbar-thumb {
    background-color: var(--border-medium); border-radius: 10px;
    border: 2px solid var(--bg-panel-static);
}
.sidebar-content-wrapper::-webkit-scrollbar-thumb:hover,
.suggestions-dropdown::-webkit-scrollbar-thumb:hover { background-color: var(--text-light); }
.sidebar-content-wrapper, .suggestions-dropdown {
    scrollbar-width: thin;
    scrollbar-color: var(--border-medium) var(--bg-panel-static);
}


/* --- STYLES RESPONSIVES POUR LES PETITS ÉCRANS (MOBILES) --- */
@media (max-width: 768px) {

.sidebar-panel {
        position: absolute; top: 0; left: 0; right: 0;
        width: 100% !important; min-width: 0 !important; max-width: 100% !important;
        height: auto; max-height: 75vh; 
        z-index: 1000; border-right: none;
        border-bottom: 1px solid var(--border-medium);
        box-shadow: 0 4px 10px rgba(0,0,0,0.15);
        transform: translateY(0);
        transition: transform 0.35s ease-in-out;
    }

    .sidebar-header {
        margin: -1rem -0.8rem 0; 
        border-radius: 0; 
        /* padding-bottom: 0.5rem; */ /* Maintenir le padding réduit pour mobile aussi */
    }

    .color-bars-underline {
        /* Ajustements pour mobile si nécessaire, par exemple hauteur ou largeur des barres */
        height: 3px;
        margin-top: 6px;
        margin-bottom: 8px;
    }
    .color-bars-underline .color-bar {
        max-width: 30px; /* Barres un peu plus fines sur mobile */
    }


    .sidebar-panel.collapsed {
        transform: translateY(calc(-100% + 50px)); 
    }

    .sidebar-content-wrapper {
        max-height: calc(75vh - 50px); 
        padding: 1rem 0.8rem; gap: 0.8rem;
    }
    
    .toggle-sidebar-button {
        top: 8px; right: 8px; left: auto; transform: none;
        width: 44px; height: 44px; border-radius: 50%; padding: 0;
        display: flex; align-items: center; justify-content: center;
        font-size: 1.3rem; font-weight: bold; z-index: 1002;
        box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    }
    
    .map-panel { height: 100vh; width: 100vw; position: absolute; top: 0; left: 0; z-index: 1; }
    #map { height: 100%; }

    .leaflet-control-zoom { margin-top: 60px !important; margin-left: 10px !important; }
    .leaflet-control-attribution { font-size: 0.65rem !important; }

    .sidebar-panel { font-size: 14px; }
    .sidebar-header h1 { font-size: 1.25rem; }
    .sidebar-panel article h2, .sidebar-panel #routeListArticle h3, .download-section h3 { font-size: 1.05rem; margin-bottom: 0.7rem; }
    .sidebar-panel label { font-size: 0.88rem; margin-bottom: 0.4rem; }
    input[type="text"]#stopNameInput { font-size: 16px; padding: 0.8rem 1rem; }
    .suggestions-dropdown div { font-size: 0.85rem; padding: 0.7rem; }
    .toggle-button { font-size: 0.9rem; padding: 0.6rem; margin-bottom: 0.8rem; }
    #routeList li.route-item { font-size: 0.88rem; padding: 0.8rem; margin-bottom: 0.4rem;}
    .operator-legend { font-size: 0.75rem; padding: 0.4rem; margin-bottom: 0.6rem; }
    .legend-color-box { width: 10px; height: 10px; margin-right: 4px;}
    .download-section article { margin-top: 1rem; } 
    .data-source-info, .data-license-info, .form-help-text { font-size: 0.75rem; }
    a.button.download-button { font-size: 0.88rem; padding: 0.6rem 1rem; }

    .sidebar-footer-quote {
        font-size: 0.75rem;
        padding: 10px 0;
    }

    .toast-container { bottom: 60px; right: 10px; left: 10px; align-items: center; }
    .toast { max-width: 90%; }
}