:root { --panel: 340px; }
  * { box-sizing: border-box; }
  html, body { height: 100%; margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; }
  #app { display: flex; height: 100%; }
  #panel { width: var(--panel); flex: 0 0 var(--panel); overflow-y: auto; padding: 16px;
           background: #fff; border-right: 1px solid #e2e2e2; z-index: 1000; }
  #map { flex: 1; height: 100%; }
  h1 { font-size: 18px; margin: 0 0 4px; }
  .sub { color: #666; font-size: 12px; margin-bottom: 14px; }
  label { display: block; font-size: 12px; font-weight: 600; color: #333; margin: 14px 0 4px; }
  select, input[type=text] { width: 100%; padding: 7px 8px; font-size: 13px;
           border: 1px solid #ccc; border-radius: 6px; }
  .radios { display: flex; gap: 6px; flex-wrap: wrap; }
  .radios button { flex: 1 1 44px; padding: 7px 4px; font-size: 12px; border: 1px solid #ccc;
           background: #f7f7f7; border-radius: 6px; cursor: pointer; white-space: nowrap; }
  .radios button.active { background: #1a6; color: #fff; border-color: #1a6; }
  .slider-row { display: flex; align-items: center; gap: 8px; }
  input[type=range] { flex: 1; }
  .dual { position: relative; height: 26px; margin-top: 4px; }
  .dual .track { position: absolute; top: 11px; left: 0; right: 0; height: 4px; background: #ddd; border-radius: 2px; }
  .dual .track-sel { position: absolute; top: 11px; height: 4px; background: #1a6; border-radius: 2px; }
  .dual input[type=range] { position: absolute; top: 0; left: 0; width: 100%; height: 26px; margin: 0;
        -webkit-appearance: none; appearance: none; background: transparent; pointer-events: none; }
  .dual input[type=range]::-webkit-slider-runnable-track { height: 4px; background: transparent; }
  .dual input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; pointer-events: auto;
        margin-top: -5.5px; width: 15px; height: 15px; border-radius: 50%; background: #1a6;
        border: 2px solid #fff; box-shadow: 0 0 0 1px #aaa; cursor: pointer; }
  .dual input[type=range]::-moz-range-track { height: 4px; background: transparent; }
  .dual input[type=range]::-moz-range-thumb { pointer-events: auto; width: 15px; height: 15px; border-radius: 50%;
        background: #1a6; border: 2px solid #fff; box-shadow: 0 0 0 1px #aaa; cursor: pointer; }
  #candRange { color: #1a6; font-weight: 700; font-variant-numeric: tabular-nums; }
  #thVal { font-variant-numeric: tabular-nums; font-size: 12px; min-width: 42px; text-align: right; }
  #yearRow.disabled { opacity: .4; pointer-events: none; }
  #count { margin-top: 16px; font-size: 13px; color: #333; }
  #count b { color: #1a6; }
  .legend { margin-top: 12px; }
  .bar { height: 12px; border-radius: 6px; margin: 4px 0;
         background: linear-gradient(to right, #d7302b, #ffffbf, #1a9850); }
  .legend-labels { display: flex; justify-content: space-between; font-size: 11px; color: #555; }
  .legend-title { font-size: 11px; color: #333; font-weight: 600; }
  .nodata-key { display: inline-block; width: 11px; height: 11px; border-radius: 50%;
         background: #9e9e9e; vertical-align: -1px; margin-right: 4px; }
  .mk-split-wrap { background: transparent; border: 0; }
  .mk-split { width: 20px; height: 20px; border-radius: 50%; border: 1px solid #333;
         box-sizing: border-box; opacity: .95; }
  .foot { margin-top: 18px; font-size: 11px; color: #999; line-height: 1.5; }
  .foot a { color: #999; }
  .popup h3 { margin: 0 0 2px; font-size: 14px; }
  .popup .meta { color: #666; font-size: 12px; margin-bottom: 6px; }
  .popup table { border-collapse: collapse; font-size: 12px; width: 100%; }
  .popup td { padding: 3px 4px 3px 0; vertical-align: middle; }
  .popup td.v { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
  .popup td.sp { width: 58px; }
  .restab td { border-bottom: .5px solid #edf0f2; padding: 4px 5px 4px 3px; }
  .restab td.v { border-left: .5px solid #edf0f2; }
  .restab tr:first-child td { border-bottom: .5px solid #dfe4e8; }
  .restab tr:last-child td { border-bottom: 0; }
  .popup .pos { color: #1a9850; }
  .popup .mid { color: #e08600; }
  .popup .neg { color: #d7302b; }
  .delta.up { color: #1a9850; } .delta.down { color: #d7302b; } .delta.flat { color: #888; }
  .chip { display: inline-block; font-size: 11px; padding: 1px 6px; border-radius: 10px;
         background: #eee; color: #444; margin-right: 4px; }
  .chip.rep { background: #ffe0b2; color: #a15c00; }
  .chip.eco { background: #e3f0fb; color: #185fa5; }
  .chip.col { background: #d3e6f7; color: #0c447c; }
  .chip.lyc { background: #efe4f7; color: #6a1b9a; }
  .chip.agri { background: #eaf3de; color: #3b6d11; }
  .popup .hc { margin-top: 8px; padding: 7px 9px; background: #f3e5f5; border-radius: 6px; font-size: 12px; line-height: 1.4; }
  .popup .hc .badge { display: inline-block; font-size: 10px; padding: 1px 6px; border-radius: 8px; background: #8e24aa; color: #fff; margin-left: 4px; }
  .popup .hc a { color: #6a1b9a; }
  .pop-card { margin-top: 8px; padding: 8px 10px; border-radius: 8px; border: 1px solid #e3e8ee; background: #f7f9fb; }
  .pop-card-title { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #607d8b; margin-bottom: 5px; }
  .pop-card.brevet { background: #f5f9f6; border-color: #dcebe1; }
  .pop-card.brevet .pop-card-title { color: #1a6; }
  .pop-card table { margin-top: 2px; }
  .macc { margin-top: 9px; border-top: .5px solid #dcebe1; padding-top: 7px; }
  .mah { display: flex; align-items: center; justify-content: space-between; cursor: pointer;
        font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: #1a6; user-select: none; }
  .mah:hover { color: #14512f; }
  .mchev { transition: transform .15s ease; font-size: 13px; line-height: 1; }
  .macc.open .mchev { transform: rotate(90deg); }
  .mac { margin-top: 9px; }
  .mbar { display: flex; height: 15px; border-radius: 4px; overflow: hidden; margin: 2px 0 8px; }
  .mbar span { display: block; flex: none; }
  .mlg { display: flex; flex-wrap: wrap; gap: 4px 11px; font-size: 11px; color: #555; }
  .mlg span { display: flex; align-items: center; gap: 5px; }
  .mdot { display: inline-block; width: 9px; height: 9px; border-radius: 2px; flex: none; }
  .mtab { width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 10px; }
  .mtab td, .mtab th { padding: 3px 2px; text-align: right; }
  .mtab th { font-size: 10px; color: #999; font-weight: 400; }
  .mtab td.l, .mtab th.l { text-align: left; }
  .mtab .up { color: #1a9850; } .mtab .dn { color: #d7302b; } .mtab .eq { color: #e08600; }
  .mtab .tot td { border-top: .5px solid #dcebe1; padding-top: 5px; }
  .pop-card.bac { background: #f6f1fa; border-color: #e6dbf0; }
  .pop-card.bac .pop-card-title { color: #6a1b9a; }
  .pop-card.bac .macc { border-color: #e6dbf0; }
  .pop-card.bac .mah { color: #6a1b9a; }
  .voie { display: flex; gap: 5px; margin-bottom: 7px; }
  .voie button { flex: 1; font-size: 11px; padding: 3px 8px; border-radius: 6px;
        border: .5px solid #d9c7e6; background: #fff; color: #6a1b9a; cursor: pointer; }
  .voie button.on { background: #8e5bb5; color: #fff; border-color: #8e5bb5; }
  .help { display: inline-block; width: 15px; height: 15px; line-height: 15px; text-align: center;
        border-radius: 50%; background: #cfd8dc; color: #37474f; font-size: 10px; font-weight: 700;
        cursor: help; margin-left: 4px; vertical-align: middle; }
  .help:hover { background: #90a4ae; color: #fff; }
  .btn { width: 100%; padding: 9px; font-size: 13px; border: 1px solid #ccc; background: #f7f7f7;
        border-radius: 6px; cursor: pointer; margin-top: 16px; color: #333; }
  .btn:hover { background: #eee; }
  #list { flex: 1; height: 100%; overflow: auto; display: none; background: #fff; }
  table.list { width: 100%; border-collapse: collapse; font-size: 12px; }
  table.list thead th { position: sticky; top: 0; background: #f5f5f5; text-align: left;
        padding: 8px 10px; border-bottom: 2px solid #ddd; z-index: 1; white-space: nowrap; }
  table.list thead th[data-col] { cursor: pointer; user-select: none; }
  table.list thead th[data-col]:hover { background: #e8eef0; }
  table.list th.num, table.list td.num { text-align: right; font-variant-numeric: tabular-nums; }
  table.list td { padding: 6px 10px; border-bottom: 1px solid #f0f0f0; }
  table.list tbody tr:hover { background: #eef7f1; cursor: pointer; }
  .listnote { padding: 12px; font-size: 12px; color: #777; }
  /* --- regroupement des réglages propres au collège (brevet) --- */
  #collegeSection { margin-top: 18px; padding: 10px 12px 14px; background: #f5f9f6;
        border: 1px solid #dcebe1; border-radius: 10px; }
  .section-title { display: flex; align-items: center; gap: 6px; margin: 2px 0;
        font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #1a6; }
  .section-title .help { margin-left: auto; }
  #collegeSection > label:first-of-type { margin-top: 8px; }
  #lyceeSection { margin-top: 14px; padding: 10px 12px 14px; background: #f6f1fa;
        border: 1px solid #e6dbf0; border-radius: 10px; }
  #lyceeSection > label:first-of-type { margin-top: 8px; }
  .radios.lyc button.active { background: #8e5bb5; border-color: #8e5bb5; }
  .section-title.lyc { color: #6a1b9a; }
  .mk-quad { background: transparent; border: 0; }
  /* --- infobulles personnalisées : multi-lignes, non rognées par le panneau --- */
  .help:focus { background: #90a4ae; color: #fff; outline: none; }
  #tip { position: fixed; left: -9999px; top: -9999px; z-index: 3000; max-width: 264px;
        background: #263238; color: #eceff1; font-size: 12px; line-height: 1.5;
        padding: 9px 12px; border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.24);
        white-space: pre-line; pointer-events: none; opacity: 0; transform: translateY(-3px);
        transition: opacity .12s ease, transform .12s ease; }
  #tip.show { opacity: 1; transform: translateY(0); }
  .site-links { font-size: 12px; margin: -8px 0 14px; }
  .site-links a { color: #0c7d4d; text-decoration: none; }
  .site-links a:hover { text-decoration: underline; }
  /* ---- responsive mobile : panneau en tiroir ---- */
  .panel-toggle, .panel-close, #panel-backdrop { display: none; }
  @media (max-width: 720px) {
    #app { position: relative; }
    #map, #list { width: 100%; }
    #panel { position: absolute; top: 0; left: 0; height: 100%; width: 86vw; max-width: 340px;
             z-index: 1200; transform: translateX(-100%); transition: transform .25s ease;
             box-shadow: 2px 0 14px rgba(0,0,0,.28); }
    #panel.open { transform: translateX(0); }
    .panel-toggle { display: inline-flex; align-items: center; gap: 6px; position: absolute; top: 10px; left: 10px;
             z-index: 1100; background: #fff; border: 1px solid #bbb; border-radius: 8px; padding: 8px 12px;
             font-size: 14px; font-weight: 600; color: #1a6; box-shadow: 0 1px 6px rgba(0,0,0,.25); cursor: pointer; }
    .panel-close { display: block; position: absolute; top: 6px; right: 10px; background: none; border: none;
             font-size: 26px; line-height: 1; color: #666; cursor: pointer; padding: 4px; }
    #panel-backdrop.show { display: block; position: absolute; inset: 0; background: rgba(0,0,0,.35); z-index: 1150; }
  }
  /* ---- fiche en tiroir bas (mobile) ----
     Une popup Leaflet ancrée au marqueur est inutilisable ici : la fiche d'un site
     collège+lycée fait ~740 px (~1020 px accordéon « mentions » ouvert), soit plus
     que la hauteur d'un écran de téléphone. Voir showFiche() pour le détail. */
  #fiche { display: none; }
  @media (max-width: 720px) {
    #fiche { display: flex; flex-direction: column; position: absolute; left: 0; right: 0; bottom: 0;
             max-height: 66%; z-index: 1100; background: #fff; border-radius: 14px 14px 0 0;
             box-shadow: 0 -3px 18px rgba(0,0,0,.28); transform: translateY(101%);
             transition: transform .22s ease; }
    #fiche.open { transform: translateY(0); }
    #fiche-grip { position: relative; flex: none; padding: 7px 0 3px; text-align: center; cursor: grab; }
    #fiche-grip i { display: inline-block; width: 38px; height: 4px; border-radius: 2px; background: #cfd8dc; }
    #ficheClose { position: absolute; top: 0; right: 6px; background: none; border: none;
             font-size: 26px; line-height: 1; color: #666; cursor: pointer; padding: 2px 10px; }
    /* seule zone défilante : la carte reste manipulable au-dessus du tiroir */
    #fiche-body { overflow-y: auto; overscroll-behavior: contain;
             -webkit-overflow-scrolling: touch; padding: 0 14px 18px; }
    #fiche-body .popup { max-width: none; }
  }