:root { color-scheme:dark; --paper:#14251e; --surface:#1d3329; --green:#a7ceb4; --ink:#edf3ee; --muted:#adbdaf; --line:#3c5547; --lime:#304b37; --car:#efb07d; --transit:#93c4f0; --bike:#acd298; }
* { box-sizing:border-box; }
html,body { height:100%; margin:0; }
body { color:var(--ink); background:#112019; font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
button,input { font:inherit; }
button { cursor:pointer; color:inherit; }
button:disabled { opacity:.5; cursor:default; }
button,a,input,summary { -webkit-tap-highlight-color:transparent; }
:focus-visible { outline:3px solid #91a656; outline-offset:3px; }
[hidden] { display:none!important; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.app-header { background:#112019; height:78px; display:flex; align-items:center; gap:32px; padding:0 28px; border-bottom:1px solid var(--line); }
.brand { color:var(--ink); text-decoration:none; font-size:23px; font-weight:750; letter-spacing:-1px; white-space:nowrap; }
.brand-icon { display:inline-block; width:38px; height:38px; margin-right:8px; vertical-align:middle; }
.brand-dot { color:#809343; }
.city-search { display:flex; width:440px; max-width:45%; margin:auto; background:var(--surface); border:1px solid var(--line); border-radius:28px; padding:5px; }
.city-search input { width:100%; min-width:0; padding:6px 14px; border:0; background:transparent; color:var(--ink); outline-offset:0; border-radius:20px; }
.city-search button { border:0; border-radius:22px; background:var(--green); color:#14251e; padding:9px 18px; white-space:nowrap; font-weight:600; }
.header-caption { color:var(--muted); font-size:12px; }
.workspace { display:flex; height:calc(100dvh - 78px); min-height:0; }
#panel-left { background:#112019; flex:0 0 370px; width:370px; overflow-y:auto; padding:26px 26px 20px; scrollbar-width:thin; border-right:1px solid var(--line); }
.tabs-row { display:flex; align-items:center; gap:12px; margin-bottom:22px; }
.tabs-row .tabs { flex:1; min-width:0; margin-bottom:0; }
.tabs-row #hide-left { flex-shrink:0; }
#hide-left { border:1px solid var(--line); background:transparent; border-radius:50%; width:30px; height:30px; font-size:18px; }
h2 { font-size:14px; margin:0; } h3 { font-size:16px; margin:8px 0; }
.tabs { display:flex; border-bottom:1px solid var(--line); margin-bottom:22px; }
.tabs button { flex:1; background:transparent; border:0; padding:12px; border-bottom:3px solid transparent; font-weight:600; color:var(--muted); }
.tabs button[aria-selected="true"] { color:var(--green); border-bottom-color:var(--green); }
.section-heading { display:flex; justify-content:space-between; align-items:center; margin:0 0 12px; }
.section-heading>span { font-size:10px; color:var(--muted); }
.destinations { border:1px solid var(--line); border-radius:14px; background:var(--surface); overflow:hidden; }
.destination { display:flex; align-items:center; padding:12px; gap:10px; }
.destination+.destination { border-top:1px solid var(--line); }
.destination>span:last-child { flex:1; min-width:0; }
.letter { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; flex-shrink:0; background:#e8e5f1; color:#66528a; border-radius:7px; font-size:11px; font-weight:700; }
.field-label { display:block; color:var(--muted); font-size:10px; margin-bottom:2px; }
.destination input { width:100%; padding:0; border:0; background:transparent; color:var(--ink); font-size:12px; text-overflow:ellipsis; }
.transport-type { margin:20px 0 16px; padding:0; border:0; display:flex; gap:6px; }
.transport-type legend { margin-bottom:10px; font-size:12px; font-weight:600; }
.transport-type label { display:flex; align-items:center; gap:4px; flex:1; border:1px solid var(--line); border-radius:8px; background:var(--surface); padding:8px 5px; font-size:11px; cursor:pointer; }
input[type="checkbox"] { accent-color:var(--green); width:14px; height:14px; flex-shrink:0; }
.transport-type label:has(:checked) { border-color:#6d9279; background:#304b37; }
.start-hint { display:flex; gap:10px; padding:12px; background:var(--lime); border-radius:10px; }
.start-hint>span { font-size:25px; line-height:1; } .start-hint p { margin:0; font-size:12px; }
.primary-button { margin-top:10px; width:100%; border:0; border-radius:9px; padding:10px; background:var(--green); color:#14251e; font-weight:600; }
.small-note { font-size:10px; color:var(--muted); margin:8px 0 16px; }
#panel-right { display:none; }
.trip-card,.school-card { background:var(--surface); border:1px solid var(--line); border-radius:14px; margin:12px 0; padding:15px; overflow-wrap:anywhere; }
.trip-card h3 { display:flex; align-items:center; gap:8px; font-size:13px; margin:0 0 12px; }
.trip-card .address { color:var(--muted); font-size:11px; margin-bottom:12px; }
.route-result { padding:10px 0; border-top:1px solid var(--line); font-size:12px; }
.route-summary { display:flex; align-items:center; gap:8px; }
.route-summary strong { margin-left:auto; color:var(--ink); font-size:18px; white-space:nowrap; }
.route-summary small { color:var(--muted); font-size:10px; }
.route-result details { margin-top:10px; } summary { cursor:pointer; }
.route-result ol { padding-left:18px; color:var(--muted); } .route-result li { padding:4px 0; }
.route-warning { color:#efbd8f; font-size:11px; padding:8px 0; }
.muted { color:var(--muted); font-size:12px; }
.empty-state { text-align:center; padding:24px 12px; border:1px dashed var(--line); border-radius:12px; color:var(--muted); font-size:12px; }
.empty-state>span { font:40px Georgia,serif; color:var(--green); } .empty-state h3 { color:var(--ink); }
.school-card>div { line-height:1.8; } .school-card h3 { margin-top:0; }
.legend-details { margin-top:20px; font-size:11px; color:var(--muted); }
.note-scale { display:flex; } .note-scale span { flex:1; font-size:9px; text-align:center; border-bottom:5px solid; padding-bottom:4px; }
.note-scale span:nth-child(1) { border-color:#e53935; } .note-scale span:nth-child(2) { border-color:#ec407a; } .note-scale span:nth-child(3) { border-color:#fdd835; } .note-scale span:nth-child(4) { border-color:#8e24aa; } .note-scale span:nth-child(5) { border-color:#1e88e5; } .note-scale span:nth-child(6) { border-color:#43a047; }
.department-filter { margin-top:24px; border-top:1px solid var(--line); padding-top:16px; }
.department-filter>summary { font-size:12px; font-weight:600; } #dep-count { float:right; font-size:10px; color:var(--muted); font-weight:400; }
#dep-search { margin-top:12px; width:100%; border:1px solid var(--line); padding:9px; border-radius:8px; background:var(--surface); font-size:12px; }
.filter-actions { display:flex; justify-content:space-between; margin:8px 0; }
.filter-actions button { border:0; background:transparent; padding:4px 0; color:var(--green); font-size:11px; text-decoration:underline; }
#dep-list { max-height:210px; overflow:auto; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:4px; }
.dep-option { display:flex; align-items:center; gap:6px; padding:4px; font-size:12px; cursor:pointer; }
.range-filters { margin-top:18px; padding-top:16px; border-top:1px solid var(--line); display:grid; gap:12px; }
.range-filter label { display:block; margin-bottom:8px; font-size:11px; color:var(--muted); font-weight:600; }
.range-filter select { width:100%; padding:9px 10px; border:1px solid var(--line); border-radius:8px; background:var(--surface); color:var(--ink); font-size:12px; }
.dual-range-block { display:grid; gap:12px; margin-top:10px; }
.range-group { padding:8px 0 0; }
.range-label { display:block; margin-bottom:6px; font-size:11px; color:var(--muted); font-weight:600; }
.range-slider-wrap { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:8px; }
.range-slider-wrap input[type="range"] { width:100%; accent-color:var(--green); }
.range-min, .range-max { font-size:10px; color:var(--muted); }
.range-readout { display:flex; justify-content:space-between; margin-top:4px; font-size:10px; color:var(--muted); }
.range-readout strong { color:var(--ink); font-size:11px; }
.map-area { flex:1; position:relative; min-width:0; min-height:0; background:var(--paper); }
@media (max-width:1300px) {
  #dep-list { grid-template-columns:repeat(4,minmax(0,1fr)); }
}
@media (max-width:1100px) {
  #dep-list { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:700px) {
  #dep-list { grid-template-columns:repeat(3,minmax(0,1fr)); max-height:180px; }
}
@media (max-width:520px) {
  #dep-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
#map { height:100%; width:100%; z-index:0; }
.map-toolbar { position:absolute; top:20px; left:20px; right:60px; display:flex; gap:10px; pointer-events:none; z-index:500; }
.map-toolbar>* { pointer-events:auto; }
.layer-switches { display:flex; gap:16px; padding:11px 16px; background:var(--paper); border:1px solid var(--line); border-radius:24px; box-shadow:0 3px 16px #203c3412; font-size:12px; }
.layer-switches label { display:flex; align-items:center; gap:5px; cursor:pointer; }
#toggle-left { display:none; border:1px solid var(--line); border-radius:24px; background:var(--paper); padding:8px 16px; }
.map-caption { position:absolute; bottom:30px; left:20px; background:var(--paper); padding:10px 16px; border-radius:10px; box-shadow:0 2px 10px #203c3412; font-size:12px; pointer-events:none; }
.route-legend { position:absolute; right:20px; bottom:30px; background:var(--paper); border-radius:8px; padding:8px 12px; display:flex; gap:14px; font-size:10px; }
.car-key { color:var(--car); } .transit-key { color:var(--transit); } .bike-key { color:var(--bike); }
.route-legend span::before { content:""; display:inline-block; width:12px; height:3px; margin:0 5px 3px 0; background:currentColor; }
#loading { display:none; position:absolute; top:80px; left:20px; background:var(--green); color:#14251e; padding:9px 16px; border-radius:12px; z-index:600; font-size:12px; }
.leaflet-popup-content { max-height:50vh; overflow-y:auto; font-family:inherit; } .leaflet-container { font-family:inherit; }
.leaflet-top.leaflet-left { left:auto; right:12px; top:10px; } .leaflet-control-zoom { border:1px solid var(--line)!important; overflow:hidden; border-radius:9px!important; }
@media(min-width:1400px) { #panel-left { flex-basis:400px; width:400px; padding-left:32px; padding-right:32px; } }
@media(max-width:1100px) { .header-caption { display:none; } .city-search { margin-left:auto; margin-right:0; max-width:50%; } .map-caption { display:none; } }
@media(max-width:700px) {
  .app-header { height:112px; padding:12px 16px; flex-wrap:wrap; gap:10px; } .brand { font-size:20px; } .brand-icon { width:30px; height:30px; }
  .city-search { order:2; width:100%; max-width:none; padding:3px; } .city-search input { font-size:16px; } .city-search button { padding:5px 16px; font-size:12px; }
  .workspace { height:calc(100dvh - 112px); flex-direction:column-reverse; }
  #panel-left { flex:0 0 53%; width:100%; padding:18px 20px; border-right:0; border-top:1px solid var(--line); }
  .tabs-row { margin-bottom:16px; } .tabs button { padding:9px; }
  .map-toolbar { top:10px; left:10px; gap:5px; right:50px; } .layer-switches { padding:8px 10px; gap:7px; font-size:11px; }
  #toggle-left { padding:6px 10px; font-size:11px; } .route-legend { left:10px; right:auto; bottom:22px; padding:5px 8px; } #loading { top:58px; left:10px; }
  .destination input { font-size:16px; } .leaflet-top.leaflet-left { top:0; right:8px; }
}
@media(prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important; } }

/* Les valeurs détaillées apparaissent à l’échelle du quartier. */
.map-overview .school-marker>div { transform:scale(.55); transform-origin:50% 100%; }
.map-overview .school-marker>div>div:first-child { visibility:hidden; }

.leaflet-container { background:#e8eddf; }
.leaflet-popup-content-wrapper,.leaflet-popup-tip { background:var(--surface); color:var(--ink); }
.leaflet-bar a,.leaflet-bar a:hover { background:var(--surface); color:var(--ink); border-color:var(--line); }
.leaflet-control-attribution { background:var(--paper)!important; color:var(--muted); }
.leaflet-control-attribution a,.leaflet-container a.leaflet-popup-close-button { color:var(--green); }
input::placeholder { color:var(--muted); opacity:1; }

.destination:nth-child(2) .letter,.trip-card:nth-child(2) .letter { background:#f4e9d7; color:#906637; }
.destination:nth-child(3) .letter,.trip-card:nth-child(3) .letter { background:#dfe9b6; color:#235b46; }

/* Le thème sombre habille les panneaux ; les tuiles conservent leurs couleurs originales. */
.leaflet-tile-pane { filter:none; }

.departure-picker { margin:16px 0; }
.departure-picker label { display:block; font-size:12px; font-weight:600; margin-bottom:8px; }
.departure-picker input { width:100%; min-width:0; border:1px solid var(--line); border-radius:9px; padding:10px; background:var(--surface); color:var(--ink); }
@media(max-width:700px) { .departure-picker input { font-size:16px; } }

.price-controls { border-top:1px solid var(--line); padding-top:18px; margin-top:22px; }
.price-toggle { display:flex; gap:8px; align-items:center; font-weight:600; cursor:pointer; }
#price-options>label { display:block; font-size:11px; margin:14px 0 6px; }
#price-type { width:100%; padding:10px; border:1px solid var(--line); border-radius:9px; color:var(--ink); background:var(--surface); font:inherit; }
.price-method { margin-top:14px; font-size:11px; color:var(--muted); }
.price-method a { color:var(--green); }
#price-retry { color:var(--ink); background:var(--surface); border:1px solid var(--line); border-radius:6px; padding:6px 10px; }
#price-detail:not(:empty) { padding-top:10px; }
.price-legend { position:absolute; bottom:30px; left:20px; z-index:500; width:260px; padding:12px; border:1px solid var(--line); border-radius:10px; background:var(--paper); font-size:11px; pointer-events:none; }
.price-scale { display:grid; grid-template-columns:1fr 1fr; gap:5px 10px; margin:8px 0; }
.price-scale span::before { content:""; display:inline-block; width:12px; height:10px; background:var(--swatch); margin-right:6px; border-radius:2px; }
.price-legend small { color:var(--muted); }
.price-tooltip { background:var(--paper); color:var(--ink); border-color:var(--line); padding:12px; white-space:normal; min-width:220px; }
.price-tooltip:before { display:none; }
.price-info h3 { margin:0 0 6px; font-size:13px; }
.price-info p { margin:5px 0; }
.price-info table { width:100%; font-size:11px; border-collapse:collapse; margin-top:8px; }
.price-info th,.price-info td { padding:3px; text-align:left; border-bottom:1px solid var(--line); }
@media(max-width:700px) { .price-legend { left:10px; bottom:49px; width:240px; padding:8px; font-size:10px; } #price-type { font-size:16px; } }

.price-scale .price-unavailable::before { border:1px dashed var(--muted); }

#panel-left>.department-filter { margin:0 0 18px; padding:0 0 16px; border-top:0; border-bottom:1px solid var(--line); }
#panel-left>.department-filter #dep-count { float:none; display:block; margin:4px 0 0 15px; }

.geo-credit { margin-top:20px; font-size:10px; }
.geo-credit a { color:var(--muted); }