/* ---- logo ---- */
  #head { position: absolute; z-index: 500; top: 14px; left: 14px;
          padding: 11px 18px 12px; }
  #head .brand { display: flex; align-items: center; gap: 10px; pointer-events: none; }
  #head .mark { display: block; width: 40px; height: auto; flex: none; }
  #head h1 {
    margin: 0; font-size: 23px; font-weight: 700; line-height: 1;
    letter-spacing: -.04em;
    font-variation-settings: "wdth" 95, "wght" 700;
    font-feature-settings: "ss02" 1;
  }
  #head h1 .brand-hot { color: var(--hot); }
  #home-btn { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%;
              border: 0; border-radius: inherit; background: transparent;
              cursor: pointer; }
  #home-btn:focus-visible { outline: 2px solid var(--front); outline-offset: 2px; }
  #incidents {
    position: absolute; z-index: 500; top: 84px; left: 14px;
    display: flex; flex-wrap: wrap; gap: 6px;
    max-width: min(560px, calc(100vw - 300px));
  }
  #incidents[hidden] { display: none; }
  #incidents button {
    min-width: 0; padding: 7px 10px; border: 1px solid rgba(255,255,255,.12);
    border-radius: 8px; background: rgba(13,15,18,.85); color: #d8d5d1;
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    font: inherit; font-size: 12px; font-weight: 600; line-height: 1.2; cursor: pointer;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  #incidents button::before {
    content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 7px;
    border-radius: 50%; background: var(--incident-color, var(--front));
    box-shadow: 0 0 0 1px rgba(255,255,255,.55); vertical-align: 1px;
  }
  #incidents button:hover, #incidents button:focus-visible {
    background: rgba(25,28,33,.92); border-color: rgba(255,255,255,.25);
    color: var(--ink);
  }
  #psfdf-panel {
    position: absolute; z-index: 498; top: 76px; right: 14px;
    width: 320px; padding: 15px; display: flex; flex-direction: column;
    max-height: calc(100vh - 168px); overflow: hidden;
    background:
      radial-gradient(110% 72% at 8% -10%,
        var(--psfdf-glow, rgba(255,255,255,.08)), transparent 58%),
      linear-gradient(152deg, var(--psfdf-tint, rgba(20,22,26,.94)),
                      rgba(13,15,18,.95) 48%, rgba(11,13,16,.94));
    border-width: 1.5px;
    border-color: var(--psfdf-border, rgba(255,255,255,.10));
    box-shadow: 0 11px 32px rgba(0,0,0,.28),
                0 0 24px var(--psfdf-shadow, transparent),
                inset 0 1px 0 rgba(255,255,255,.055);
    transition: background .24s ease, border-color .24s ease,
                box-shadow .24s ease;
  }
  #psfdf-panel[hidden] { display: none; }
  #psfdf-panel header {
    position: relative; flex: none; margin-bottom: 11px; padding-right: 26px;
  }
  #psfdf-panel h2 { margin: 0; font-size: 16px; line-height: 1.15; }
  #psfdf-panel .panel-sub { margin: 4px 0 0; color: var(--ink-dim);
                            font-size: 11.5px; line-height: 1.35; }
  #psfdf-panel-body { min-height: 0; overflow-y: auto; scrollbar-width: thin; }
  /* Le chevron de pli est habillé par média : l'état d'accueil n'est pas le
     même de part et d'autre de 720 px. Le retour, lui, ne sert que sur mobile,
     où le bandeau remplace les raccourcis d'incendies. */
  #psfdf-back { display: none; }
  .psfdf-detail-status i, .psfdf-head-status i {
    width: 9px; height: 9px; border-radius: 50%; flex: none;
    box-shadow: 0 0 0 1px rgba(255,255,255,.62),
                0 0 10px var(--psfdf-accent, transparent);
  }
  .psfdf-detail-status { display: flex; align-items: center; gap: 7px;
                         margin: 0 0 11px 2px; font-size: 12px; font-weight: 650; }
  .psfdf-panel-heading {
    min-width: 0; display: flex; align-items: center; gap: 8px;
  }
  .psfdf-panel-heading h2 { min-width: 0; flex: 1; }
  .psfdf-relative {
    flex: none; padding: 2px 6px; border-radius: 999px;
    background: rgba(255,255,255,.065); color: #c6c1bb;
    font-size: 9.5px; font-weight: 600; white-space: nowrap;
    font-variant-numeric: tabular-nums;
  }
  .psfdf-head-status { display: none; }
  .psfdf-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
  .psfdf-stat {
    padding: 9px; border: 1px solid rgba(255,255,255,.045); border-radius: 8px;
    background: linear-gradient(145deg, rgba(255,255,255,.072),
                                rgba(255,255,255,.035));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
  }
  .psfdf-stat small { display: block; color: var(--ink-dim); font-size: 10px;
                      text-transform: uppercase; letter-spacing: .045em; }
  .psfdf-stat b { display: block; margin-top: 3px; font-size: 15px; }
  .psfdf-note { margin: 10px 0 0; padding-top: 9px;
                border-top: 1px solid rgba(255,255,255,.1);
                color: #d8d5d1; font-size: 11.5px; line-height: 1.4; }
  .psfdf-dates { margin: 10px 0 0; color: var(--ink-dim);
                 font-size: 10.5px; line-height: 1.45; }
  .psfdf-activity { margin-top: 10px; padding-top: 9px;
                    border-top: 1px solid rgba(255,255,255,.1); }
  .psfdf-activity-head { display: flex; align-items: center; justify-content: space-between;
                         gap: 8px; margin-bottom: 6px; }
  .psfdf-activity-head strong { min-width: 0; font-size: 11px; font-weight: 700; }
  .psfdf-activity-tabs { display: flex; flex: none; gap: 2px; padding: 2px;
                         border-radius: 6px; background: rgba(0,0,0,.2); }
  .psfdf-activity-tabs button { padding: 3px 6px; border: 0; border-radius: 4px;
                                background: transparent; color: var(--ink-dim);
                                font: inherit; font-size: 9.5px; cursor: pointer; }
  .psfdf-activity-tabs button[aria-pressed="true"] {
    background: rgba(255,255,255,.13); color: var(--ink);
  }
  .psfdf-activity-chart { position: relative; height: 96px; }
  .psfdf-activity-plot { position: absolute; inset: 3px 0 17px 34px;
                         border-left: 1px solid #454a52;
                         border-bottom: 1px solid #454a52; }
  .psfdf-activity-plot::before { content: ''; position: absolute; top: 0;
                                 right: 0; left: 0; height: 1px;
                                 background: rgba(255,255,255,.10); }
  .psfdf-activity-chart b { position: absolute; bottom: 0; width: 3px;
                            min-height: 2px; margin-left: -1.5px;
                            border-radius: 2px 2px 0 0; background: var(--hot); }
  .psfdf-activity-chart svg { position: absolute; inset: 0; width: 100%; height: 100%;
                              overflow: hidden; pointer-events: none; }
  .psfdf-activity-chart path { fill: none; stroke: var(--front); stroke-width: 2;
                               vector-effect: non-scaling-stroke; }
  .psfdf-activity-y { position: absolute; top: 0; left: 0; width: 29px;
                      color: var(--ink-dim); text-align: right; font-size: 8.5px;
                      line-height: 1; font-variant-numeric: tabular-nums; }
  .psfdf-activity-x { position: absolute; right: 0; bottom: 0; left: 34px;
                      display: flex; justify-content: space-between;
                      color: var(--ink-dim); font-size: 8.5px; line-height: 1;
                      font-variant-numeric: tabular-nums; }
  .psfdf-activity-empty { display: grid; height: 70px; place-items: center;
                          color: var(--ink-dim); font-size: 10.5px; }
  .psfdf-activity-caption { margin: 5px 0 0; color: var(--ink-dim);
                            font-size: 9.5px; line-height: 1.3; }
  .psfdf-more {
    position: relative; display: grid; place-items: center;
    margin-top: 12px; padding: 10px 40px 10px 12px;
    border: 1px solid rgba(255,255,255,.15); border-radius: 8px;
    background: #24282e; color: var(--ink); text-decoration: none; text-align: center;
    font-size: 12.5px; font-weight: 700; line-height: 1.15;
  }
  .psfdf-more small { display: block; margin-top: 3px; color: var(--ink-dim);
                      font-size: 10px; font-weight: 600; }
  .psfdf-more svg {
    position: absolute; right: 13px; top: 50%; width: 17px; height: 17px;
    transform: translateY(-50%); fill: none; stroke: currentColor;
    stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
  }
  .psfdf-more:hover, .psfdf-more:focus-visible { background: #32373f; }
  #incidents.layers-open ~ #psfdf-panel,
  #incidents.credits-open ~ #psfdf-panel,
  #incidents.activity-open ~ #psfdf-panel,
  #incidents.weather-open ~ #psfdf-panel,
  #incidents.updates-open ~ #psfdf-panel,
  #incidents.export-open ~ #psfdf-panel,
  #incidents.layers-open ~ #psfdf-back,
  #incidents.credits-open ~ #psfdf-back,
  #incidents.activity-open ~ #psfdf-back,
  #incidents.weather-open ~ #psfdf-back,
  #incidents.updates-open ~ #psfdf-back,
  #incidents.export-open ~ #psfdf-back { display: none; }

  /* ---- calques ---- */
  #layers { position: absolute; z-index: 500; top: 54px; right: 58px;
            padding: 11px 14px; font-size: 12.5px; }
  #layers:not(.open) { display: none; }
  #layers label { display: flex; align-items: center; gap: 8px; margin: 3px 0;
                  cursor: pointer; white-space: nowrap; }
  #layers .sub-layer { margin: 5px 0 4px; padding: 2px 0 2px 10px;
                       border-left: 1px solid #3a3f47; }
  #layers .sub-layer label { margin: 0; font-size: 11.5px; }
  #layers label[hidden] { display: none; }   /* `display:flex` gagnerait sinon */
  /* L'input est une cible a part entière : on peut cocher sa case, pas
     seulement cliquer sur le libellé. Sa taille reste compacte mais tactile. */
  #layers input { accent-color: var(--hot); margin: 0; width: 16px; height: 16px;
                  flex: none; cursor: pointer; }
  #layers fieldset { margin: 7px 0 5px; padding: 6px 0 1px 10px;
                     border: 0; border-left: 1px solid #3a3f47; }
  #layers legend { padding: 0; color: var(--ink-dim); font-size: 11px; }
  #layers fieldset label { font-size: 11.5px; }
  #layers label:has(input:disabled) { opacity: .45; cursor: default; }
  #layers input:disabled { cursor: default; }
  #aircraft-status { margin: 4px 0 2px 24px; max-width: 190px;
                     color: var(--ink-dim); font-size: 10.5px; line-height: 1.3; }
  #aircraft-status[hidden] { display: none; }
  /* EFFIS ne publie qu'un etat de chaque polygone : hors du cran le plus
     recent les surfaces sont masquees, et l'interface doit le dire */
  #layers .hint { display: none; margin-top: 7px; max-width: 186px;
                  white-space: normal; font-size: 11px; line-height: 1.35;
                  color: var(--ink-dim); }
  body.past #layers .hint { display: block; }
  /* seules les surfaces brulees s'effacent hors du cran le plus recent ;
     le vent, lui, est connu a chaque instant de la frise */
  body.past #layers label.ba { opacity: .45; }
  body.past #legend .burnt-key { opacity: .32; }
  #layers-btn {
    display: block; position: absolute; z-index: 501; top: 14px; right: 58px;
    padding: 8px 12px; color: #cbc7c2; font: inherit; font-size: 12px;
    font-weight: 600; line-height: 1.45; cursor: pointer;
  }
  #layers-btn:hover { color: var(--ink); }
  #layers-btn svg, #weather-btn svg { width: 16px; height: 16px; flex: none;
                                     stroke-width: 2; }
  #layers-btn svg { margin-right: 5px; color: #fff; vertical-align: -3px; }
  #layers-btn::after { content: " ›"; }
  #layers-btn[aria-expanded="true"]::after { content: " ⌄"; }

  /* ---- barre du bas ---- */
  #legend { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 11.5px; }
  #legend span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
  #legend i { width: 10px; height: 10px; border-radius: 50%; flex: none; }
  #legend i.poly { border-radius: 3px; }
  #psfdf-key {
    width: 100%; padding-top: 5px; border-top: 1px solid rgba(255,255,255,.1);
    flex-wrap: wrap; gap: 4px 9px !important;
  }
  #psfdf-key > b { color: var(--ink-dim); font-size: 10.5px; }
  #psfdf-key em { display: inline-flex; align-items: center; gap: 4px;
                  color: #d8d5d1; font-size: 10.5px; font-style: normal; }
  #psfdf-key i { width: 8px; height: 8px; }
  #legend-btn {
    display: none; font: inherit; font-size: 11.5px; font-weight: 600;
    color: #bcb7b1; text-align: left; cursor: pointer;
  }

  /* Echelle continue d'anciennete. Le degrade et la position des reperes sont
     poses par `drawAgeKey()` a partir de la table qui peint la carte : une
     seule source, elles ne peuvent pas diverger. */
  #agekey { align-items: flex-start; width: 180px; flex: 1 1 180px; }
  #ageramp {
    position: relative; display: block; width: 156px; height: 10px;
    border-radius: 5px; margin-bottom: 17px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
  }
  #ageramp b {
    position: absolute; top: 15px; font-weight: 400; font-size: 10px;
    line-height: 1; color: var(--ink-dim); white-space: nowrap;
  }
  #ageramp b::before {
    content: ""; position: absolute; top: -5px; left: var(--tick-offset, 0);
    width: 1px; height: 3px; background: rgba(255,255,255,.28);
  }

  /* lecture du vent : la fleche pointe la ou le vent pousse */
  #windkey { color: var(--wind); font-variant-numeric: tabular-nums; }
  #windkey svg { width: 13px; height: 13px; flex: none;
                 transform: rotate(var(--dir, 0deg)); transition: transform .35s ease; }
  /* Largeur figee sur le pire cas, pose par `lockWidths()`. Sans elle, la
     legende s'elargissait en passant de « 6 km/h » a « 127 km/h » — un panneau
     qui respire au rythme des rafales pendant la lecture. */
  #windval { display: inline-block; width: var(--wind-w, 156px); }
  /* Champ momentanement indisponible — cran hors de la fenetre du modele, carte
     centree hors grille : la ligne garde sa place. La faire disparaitre ferait
     sauter la legende en pleine animation. */
  #windkey[hidden] { visibility: hidden; }
  /* Couche decochee, en revanche : c'est un geste de l'utilisateur, la ligne
     s'en va pour de bon. */
  #windkey.off { display: none; }
  #tempkey { color: #ffc19c; font-variant-numeric: tabular-nums; }
  #tempkey svg { width: 13px; height: 13px; flex: none; }
  #tempkey[hidden] { display: none; }

  #timerow { display: flex; align-items: center; gap: 12px; }
  #play { background: #21252b; color: var(--ink); border: 1px solid #363b43;
          border-radius: 8px; flex: none; width: 38px; height: 34px;
          cursor: pointer; font-size: 13px; }
  #play:hover { background: #2c313a; }

  /* La reglette et l'intensite des passages satellite. Chaque barre est placee
     a la date du passage et sa hauteur suit le nombre de foyers detectes. */
  #track { flex: 1; min-width: 0; }
  #activity { position: relative; height: 22px; margin: 0 9px 1px;
              border-bottom: 1px solid #454a52; cursor: pointer; }
  #activity:focus-visible { outline: 2px solid var(--front); outline-offset: 3px; }
  #activity b { position: absolute; bottom: 0; width: 3px; min-height: 2px;
                margin-left: -1.5px; background: var(--hot);
                border-radius: 2px 2px 0 0; opacity: .82; }
  #activity-tip { position: fixed; z-index: 510; display: none; pointer-events: none;
                  min-width: 155px; padding: 8px 10px; border: 1px solid #3b4048;
                  border-radius: 8px; background: rgba(18,21,25,.97); color: var(--ink);
                  box-shadow: 0 5px 18px rgba(0,0,0,.28); font-size: 11px; line-height: 1.4; }
  #activity-tip.open { display: block; }
  #activity-tip strong, #activity-tip span { display: block; }
  #activity-tip span { color: var(--ink-dim); }

  #activity-panel { display: none; }
  #activity-panel.open { display: flex; flex-direction: column; }
  #activity-panel header { display: flex; align-items: center; justify-content: space-between;
                           gap: 12px; padding-bottom: 11px;
                           border-bottom: 1px solid #343941; }
  #activity-panel h2 { margin: 0; font-size: 16px; }
  #activity-panel-close { background: #21252b; color: var(--ink); border: 1px solid #363b43;
                          border-radius: 8px; flex: none; width: 34px; height: 34px;
                          cursor: pointer; padding: 0; font: 400 23px/1 system-ui, sans-serif; }
  #activity-panel-close:hover { background: #2c313a; }
  #activity-scope { margin: 12px 0 8px; color: var(--ink-dim); font-size: 12px; }
  #activity-tabs { display: flex; gap: 5px; margin: 0 0 10px; padding: 3px;
                   border: 1px solid #343941; border-radius: 8px;
                   background: rgba(0,0,0,.18); }
  #activity-tabs button { flex: 1; min-width: 0; padding: 6px 9px;
                          border: 0; border-radius: 5px; color: var(--ink-dim);
                          background: transparent; font: inherit; font-size: 12px;
                          cursor: pointer; }
  #activity-tabs button:hover { color: var(--ink); background: rgba(255,255,255,.06); }
  #activity-tabs button[aria-selected="true"] { color: var(--ink); background: #343941;
                                                  box-shadow: 0 1px 3px rgba(0,0,0,.24); }
  #activity-large { --plot-left: 44px; position: relative; flex: none; height: 250px;
                    overflow: hidden; cursor: crosshair; }
  .activity-plot { position: absolute; inset: 0 0 0 var(--plot-left);
                   border-bottom: 1px solid #454a52; }
  .activity-y-axis { position: absolute; inset: 0 auto 0 0;
                     width: calc(var(--plot-left) - 7px); pointer-events: none; }
  .activity-y-tick { position: absolute; right: 0; color: var(--ink-dim);
                     font-size: 10px; line-height: 1; font-variant-numeric: tabular-nums;
                     transform: translateY(-50%); white-space: nowrap; }
  .activity-y-tick.first { transform: none; }
  .activity-y-tick.last { transform: translateY(-100%); }
  .activity-gridline { position: absolute; z-index: 1; left: 0; right: 0; height: 1px;
                       background: rgba(255,255,255,.10); pointer-events: none; }
  /* La ligne reste au-dessus des barres pour rester lisible dans les pics. Le
     calque SVG ne capture aucun pointeur : les barres gardent leur sélection. */
  #activity-average { position: absolute; z-index: 3; inset: 0; width: 100%; height: 100%;
                      overflow: visible; pointer-events: none; }
  #activity-average path { fill: none; stroke-linecap: round; stroke-linejoin: round;
                           vector-effect: non-scaling-stroke; }
  #activity-average .halo { stroke: rgba(16,19,22,.92); stroke-width: 6; }
  #activity-average .line { stroke: var(--front); stroke-width: 2.5; }
  #activity-large b { position: absolute; bottom: 0; width: 4px; min-height: 3px;
                      margin-left: -2px; background: var(--hot);
                      border-radius: 3px 3px 0 0; opacity: .82; z-index: 2; }
  #activity-large b:hover, #activity-large b.selected {
    background: var(--front); opacity: 1 !important;
  }
  #activity-empty { position: absolute; inset: 0; display: grid; place-items: center;
                    color: var(--ink-dim); font-size: 12px; }
  #activity-detail { min-height: 52px; margin-top: 13px; padding: 11px 13px;
                     border-radius: 9px; background: rgba(255,255,255,.045);
                     font-size: 13px; line-height: 1.45; }
  #activity-detail strong, #activity-detail span { display: block; }
  #activity-detail span { color: var(--ink-dim); font-size: 12px; }
  #slider { width: 100%; margin: 0; accent-color: var(--hot); height: 24px; display: block; }
  #updates-btn { background: #21252b; color: var(--ink); border: 1px solid #363b43;
                 border-radius: 8px; flex: none; width: 34px; height: 34px;
                 cursor: pointer; font: 700 15px/1 Georgia, serif; }
  #updates-btn:hover { background: #2c313a; }
  #updates-panel { display: none; }
  #updates-panel.open { display: block; }
  #updates-panel header { display: flex; align-items: center; justify-content: space-between;
                          gap: 12px; padding-bottom: 10px; border-bottom: 1px solid #343941; }
  #updates-panel h2 { margin: 0; font-size: 14px; }
  #updates-close { background: #21252b; color: var(--ink); border: 1px solid #363b43;
                   border-radius: 8px; flex: none; width: 30px; height: 30px;
                   cursor: pointer; padding: 0; font: 400 21px/1 system-ui, sans-serif; }
  #updates-close:hover { background: #2c313a; }
  #updates-list { margin: 0; padding: 4px 0 0; list-style: none; overflow: auto; }
  #updates-list li { display: grid; grid-template-columns: 76px 1fr; gap: 3px 10px;
                     padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.08); }
  #updates-list time { color: var(--ink-dim); font-variant-numeric: tabular-nums; font-size: 11px; }
  #updates-list strong { font-size: 12px; }
  #updates-list span { grid-column: 2; color: var(--ink-dim); font-size: 11px; }
  #updates-empty { color: var(--ink-dim); font-size: 12px; padding: 16px 0; }

  /* ---- commandes de carte en haut a droite ---- */
  #top-controls { position: absolute; z-index: 501; top: 14px; right: 165px;
                  display: flex; align-items: center; gap: 6px; }
  #location-btn, #weather-btn {
    height: 35px; padding: 0 12px; color: #cbc7c2;
    font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
  }
  #location-btn { display: inline-flex; align-items: center; justify-content: center; gap: 5px; }
  #location-btn:hover, #location-btn:focus-visible,
  #location-btn.locating, #weather-btn:hover, #weather-btn[aria-expanded="true"] {
    color: var(--ink);
  }
  #location-btn .location-icon { width: 17px; height: 17px; stroke-width: 1.9; }
  #location-btn.locating .location-icon {
    animation: location-pulse 1.1s ease-in-out infinite;
  }
  #location-btn[aria-busy="true"] { cursor: wait; }
  @keyframes location-pulse { 50% { opacity: .38; transform: scale(.82); } }
  #location-status {
    position: fixed; z-index: 505; top: 58px; right: 165px;
    width: min(310px, calc(100vw - 190px)); padding: 8px 10px;
    color: #d7d3ce; font-size: 11.5px; line-height: 1.35;
  }
  #location-status[hidden] { display: none; }
  #location-status.error { color: #efb09f; }

  /* ---- previsions meteo, repliees tant qu'elles ne sont pas demandees ---- */
  #weather-btn {
    position: static;
  }
  #weather-btn .weather-icon { margin-right: 5px; color: #fff; vertical-align: -3px; }
  #weather-btn::after { content: " ›"; }
  #weather-btn[aria-expanded="true"]::after { content: " ⌄"; }
  #weather-panel { display: none; }
  #weather-panel.open { display: block; }
  #weather-panel header { display: flex; align-items: center; justify-content: space-between;
                          gap: 12px; padding-bottom: 10px;
                          border-bottom: 1px solid #343941; }
  #weather-panel h2 { margin: 0; font-size: 16px; }
  #weather-close { background: #21252b; color: var(--ink); border: 1px solid #363b43;
                   border-radius: 8px; flex: none; width: 34px; height: 34px;
                   cursor: pointer; padding: 0; font: 400 23px/1 system-ui, sans-serif; }
  #weather-close:hover { background: #2c313a; }
  #weather-place { margin: 12px 0 7px; font-size: 12px; color: var(--ink-dim);
                   font-variant-numeric: tabular-nums; }
  #weather-follow { display: block; margin: 0 0 8px; font: inherit; font-size: 12px;
    font-weight: 600;
    color: var(--ink); background: #21252b; border: 1px solid #363b43;
    border-radius: 7px; padding: 5px 9px; cursor: pointer; }
  /* `display: block` sur un sélecteur d'id l'emporte sur la règle `[hidden]` du
     navigateur : sans cette ligne, le bouton resterait visible en permanence. */
  #weather-follow[hidden] { display: none; }
  #weather-follow:hover { background: #2c313a; }
  /* Le point épinglé : un repère discret, qui ne peut pas être confondu avec un
     foyer (couleur du vent, anneau creux). */
  .weather-pin { width: 16px; height: 16px; border-radius: 50%;
    border: 2px solid var(--wind); background: rgba(10,12,15,.45);
    box-shadow: 0 0 0 1px rgba(10,12,15,.8); }
  #weather-chart-wrap { position: relative; }
  #weather-chart { display: block; width: 100%; height: auto; overflow: visible;
                   cursor: crosshair; }
  #weather-chart text { font: 11px "Instrument Sans", -apple-system, BlinkMacSystemFont,
                        "Segoe UI", sans-serif; }
  #weather-chart .axis { fill: #9da3aa; }
  #weather-chart .weather-band { stroke: rgba(255,255,255,.10); stroke-width: .8; }
  #weather-chart .temp-band { fill: rgba(255,107,26,.070); }
  #weather-chart .wind-band { fill: rgba(191,227,255,.065); }
  #weather-chart .precip-band { fill: rgba(109,199,238,.075); }
  #weather-chart .grid { stroke: rgba(255,255,255,.13); stroke-width: 1; }
  #weather-chart .temp-area { fill: url("#temp-fill"); }
  #weather-chart .temp-line { fill: none; stroke: var(--hot); stroke-width: 3.5;
                              stroke-linecap: round; stroke-linejoin: round; }
  #weather-chart .temp-dot { fill: var(--hot); stroke: #171a1f; stroke-width: 2; }
  #weather-chart .temp-value { fill: #ffc19c; font-weight: 700; }
  #weather-chart .wind-line { fill: none; stroke: var(--wind); stroke-width: 3;
                              stroke-linecap: round; stroke-linejoin: round; }
  #weather-chart .gust-line { fill: none; stroke: #dceeff; stroke-width: 1.6;
                              stroke-dasharray: 4 4; opacity: .65; }
  #weather-chart .wind-arrow { fill: var(--wind); }
  #weather-chart .precip-bar { fill: #6dc7ee; opacity: .72; }
  #weather-chart .precip-bar.zero { opacity: .24; }
  #weather-chart .precip-zero { fill: #9db2bd; font-weight: 600; }
  #weather-chart .now-line { stroke: var(--front); stroke-width: 1.5; }
  #weather-chart .update-line { stroke: #d3d7dc; stroke-width: 1.2;
                                stroke-dasharray: 3 4; opacity: .8; }
  #weather-chart .now-label { fill: var(--front); font-weight: 700; }
  #weather-chart .update-label { fill: #c1c5ca; }
  #weather-chart .hover-line { stroke: #fff; stroke-width: 1; opacity: .55;
                               pointer-events: none; }
  #weather-tip { position: absolute; z-index: 2; display: none; pointer-events: none;
                 top: 31px; min-width: 154px; padding: 8px 10px;
                 border: 1px solid #444a52; border-radius: 8px;
                 background: rgba(18,21,25,.97); color: var(--ink);
                 box-shadow: 0 5px 18px rgba(0,0,0,.32);
                 font-size: 11px; line-height: 1.4; white-space: nowrap; }
  #weather-tip.open { display: block; transform: translateX(7px); }
  #weather-tip.open.right { transform: translateX(calc(-100% - 7px)); }
  #weather-tip strong, #weather-tip span { display: block; }
  #weather-tip .temperature { margin: 2px 0; color: #ffc19c; font-size: 14px; }
  #weather-tip span:not(.temperature) { color: #c7cbd0; }
  #weather-status { margin: 8px 0 0; color: var(--ink-dim); font-size: 11px; }
  #weather-status:empty { display: none; }
  #weather-status.error { color: #efb09f; }

  /* Export social : une icône seule, à l'écart des commandes de lecture. Elle
     lance un rendu 16:9 dédié ; sa position ne prend donc aucune place à la
     frise ni à la légende. */
  #export-btn {
    position: absolute; z-index: 501; right: 14px; bottom: 64px;
    display: grid; place-items: center; width: 38px; height: 38px; padding: 0;
    color: #cbc7c2; cursor: pointer;
  }
  /* Le rayon de `.glass` retranche les quatre coins de la zone de survol. Sans
     cette cible invisible, ces quelques pixels retombent sur le canvas de la
     carte et font alterner le pointeur avec son curseur de déplacement. */
  #export-btn::before { content: ''; position: absolute; inset: -4px;
                        cursor: pointer; }
  #export-btn:hover, #export-btn:focus-visible { color: var(--ink); }
  #export-btn:disabled { opacity: .48; cursor: wait; }
  #export-btn:disabled::before { cursor: wait; }
  #export-btn.busy { opacity: 1; }
  #export-btn .export-icon { width: 17px; height: 17px; fill: none; stroke: currentColor;
                             stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  #export-btn .export-loader { display: none; width: 17px; height: 17px;
    border: 2px solid rgba(232,230,227,.34); border-top-color: var(--ink);
    border-radius: 50%; animation: export-loader-spin .72s linear infinite; }
  #export-btn.busy .export-icon { display: none; }
  #export-btn.busy .export-loader { display: block; }
  @keyframes export-loader-spin { to { transform: rotate(360deg); } }
  #export-panel {
    display: none; position: fixed; z-index: 502; right: 14px; bottom: 110px;
    width: 292px; padding: 13px 14px 14px;
  }
  #export-panel.open { display: block; }
  #export-panel h2 { margin: 0 0 11px; font-size: 13.5px; }
  #export-kind { display: grid; grid-template-columns: 1fr 1fr; gap: 3px;
    margin-bottom: 12px; padding: 3px; border-radius: 9px;
    background: rgba(8,10,12,.46); border: 1px solid rgba(255,255,255,.09); }
  #export-kind button { min-width: 0; padding: 7px 6px; border: 0;
    border-radius: 6px; background: transparent; color: #a9a5a0;
    font: inherit; font-size: 11.5px; font-weight: 650; cursor: pointer; }
  #export-kind button[aria-selected="true"] { background: #343a44; color: var(--ink);
    box-shadow: 0 1px 3px rgba(0,0,0,.28); }
  #export-kind button:focus-visible { outline: 2px solid var(--hot); outline-offset: 1px; }
  #export-panel label { color: #d6d2cd; font-size: 12.5px; cursor: pointer; }
  #export-panel .export-check { display: flex; align-items: center; gap: 9px;
    margin: 0 0 12px; }
  #export-panel label:has(input:disabled) { opacity: .45; cursor: default; }
  #export-panel input { flex: none; width: 16px; height: 16px; margin: 0;
                        accent-color: var(--hot); cursor: pointer; }
  #export-panel input:disabled { cursor: default; }
  #export-gif-options { margin: 0 0 12px; padding: 10px;
    border: 1px solid rgba(255,255,255,.11); border-radius: 9px; }
  #export-gif-options[hidden] { display: none; }
  #export-gif-options legend { padding: 0 5px; color: #aaa59f;
    font-size: 10.5px; font-weight: 650; letter-spacing: .02em; }
  #export-gif-options label { display: grid; grid-template-columns: 16px 1fr;
    column-gap: 8px; align-items: start; margin: 0; }
  #export-gif-options label + label { margin-top: 10px; }
  #export-gif-options input { margin-top: 1px; }
  #export-gif-options b { font-size: 11.5px; font-weight: 650; line-height: 1.25; }
  #export-gif-options small { grid-column: 2; margin-top: 2px; color: #999590;
    font-size: 10.5px; line-height: 1.3; }
  #export-generate { width: 100%; padding: 8px 11px; border: 1px solid #484d55;
    border-radius: 8px; background: #292e36; color: var(--ink); font: inherit;
    font-size: 12px; font-weight: 650; cursor: pointer; }
  #export-generate:hover, #export-generate:focus-visible { background: #343a44; }
  #export-toast {
    position: fixed; z-index: 505; right: 60px; bottom: 68px;
    max-width: min(300px, calc(100vw - 80px)); padding: 7px 10px;
    border-radius: 8px; background: rgba(13,15,18,.92); color: #d7d3ce;
    font-size: 11.5px; opacity: 0; transform: translateY(3px);
    pointer-events: none; transition: opacity .18s ease, transform .18s ease;
  }
  #export-toast.open { opacity: 1; transform: none; }
  /* Le second MapLibre ne sert qu'au fichier 1920 x 1080. Le garder hors écran
     évite tout clignotement pendant le chargement de ses tuiles. */
  .export-map { position: fixed; left: -10000px; top: 0; width: 1920px;
                height: 1080px; pointer-events: none; }

  #probe { position: absolute; visibility: hidden; white-space: nowrap;
           top: -9999px; left: -9999px; }
  #clock {
    position: absolute; z-index: 499; pointer-events: none;
    transform: translateX(-50%); max-width: calc(100vw - 28px);
    color: #fff; font-size: clamp(20px, 1.8vw, 28px); font-weight: 700;
    line-height: 1.1; letter-spacing: -.02em; white-space: nowrap;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 1px 3px rgba(0,0,0,.9), 0 0 10px rgba(0,0,0,.5);
  }

  /* Les credits prenaient six lignes de mentions qu'on lit une fois : sur
     telephone un bon tiers de l'ecran, sur ordinateur 280 px pris en largeur au
     detriment de la reglette. Replies derriere un lien dans les deux cas. */
  #credits { font-size: 10.5px; line-height: 1.5; color: #7d7873; }
  #credits a { color: #9a948e; text-decoration: none; border-bottom: 1px solid #3a3733; }
  #credits:not(.open) { display: none; }
  /* Une ligne par source, avec le libelle en tete : on cherche « d'ou vient le
     vent » sans relire les six phrases voisines. Le retrait negatif garde la
     continuation d'une ligne trop longue en retrait du libelle. */
  #credits ul { margin: 0; padding: 0; list-style: none; }
  #credits li { margin-bottom: 4px; padding-left: 9px; text-indent: -9px; }
  #credits b { color: #a39d97; font-weight: 600; }
  /* Liens de pied separes des sources : ils ne creditent personne. */
  #credits .cr-foot { margin: 9px 0 0; padding-top: 8px; border-top: 1px solid #322f2b; }
  #credits #updated { display: block; margin-top: 5px; }
  #cr-btn { display: block; font: inherit; font-size: 11.5px; font-weight: 600;
            color: #bcb7b1; text-align: left; cursor: pointer; }
  #cr-btn:hover { color: var(--ink); }
  #cr-btn::after { content: " ›"; }
  #cr-btn[aria-expanded="true"]::after { content: " ⌄"; }

  /* Bascule de langue : deux lettres, la couleur d'un lien secondaire. Elle se
     range à côté des crédits parce qu'elle règle le site et non la carte, et
     n'a donc rien à faire dans la rangée des calques et de la météo. */
  #lang-btn { display: block; flex: none; padding: 8px 10px; font: inherit;
              font-size: 11.5px; font-weight: 700; letter-spacing: .04em;
              color: #bcb7b1; cursor: pointer; }
  #lang-btn:hover { color: var(--ink); }
  #notifications-panel { position: fixed; z-index: 520; right: 14px; bottom: 84px; width: min(330px, calc(100vw - 28px)); padding: 14px; }
  #notifications-panel header { display: flex; justify-content: space-between; align-items: center; }
  #notifications-panel h2 { margin: 0; font-size: 16px; }
  #notifications-panel p { font-size: 12px; line-height: 1.4; color: var(--ink-dim); }
  #notifications-panel label { display: grid; gap: 4px; font-size: 12px; }
  #notifications-panel input, #notifications-panel select { min-width: 0; padding: 9px; font-size: 16px; background: #22262d; color: var(--ink); border: 1px solid #4a4742; border-radius: 6px; }
  #notifications-panel form { display: grid; gap: 8px; margin: 10px 0; }
  #notifications-panel form[hidden] { display: none; }
  #notifications-panel button, #notifications-open { font: inherit; cursor: pointer; border: 1px solid rgba(255,255,255,.15); border-radius: 7px; background: #252a32; color: var(--ink); }
  #notifications-panel header button { padding: 4px 9px; }
  #notifications-panel form button, .notify-enable, .notify-add { padding: 8px 10px; }
  #notifications-open { width: 100%; margin-top: 8px; padding: 7px 9px; text-align: left; box-sizing: border-box; }
  .notify-results { display: grid; gap: 3px; margin: 6px 0; }
  .notify-results button { display: grid; gap: 2px; text-align: left; padding: 8px 10px; }
  .notify-results button span { color: var(--ink-dim); font-size: 11px; }
  .notify-search-step[hidden], .notify-map-step[hidden], .notify-choice-step[hidden], .notify-radius-step[hidden], .notify-list[hidden] { display: none; }
  .notify-list { display: grid; gap: 9px; }
  .notify-list > p { margin: 0; }
  .notify-add { order: -1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; width: 100%; border-color: rgba(255,155,74,.55) !important; background: linear-gradient(135deg, #c9541c, #ec7831) !important; color: #fff !important; font-weight: 700; box-shadow: 0 5px 14px rgba(185,78,24,.22); }
  .notify-add span:first-child { font-size: 19px; line-height: 12px; font-weight: 400; }
  .notify-choice-step { display: grid; gap: 7px; }
  .notify-choice-step > p { margin: 0 0 2px; }
  .notify-choice { display: grid; grid-template-columns: 30px 1fr; gap: 8px; align-items: center; text-align: left; }
  .notify-choice > span:first-child { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(255,116,38,.15); color: #ffb06a; font-size: 19px; }
  .notify-choice b, .notify-choice small { display: block; }
  .notify-choice b { font-size: 13px; }
  .notify-choice small { margin-top: 2px; color: var(--ink-dim); font-size: 11px; line-height: 1.25; }
  .notify-map-step { padding: 10px; border: 1px dashed rgba(255,176,106,.55); border-radius: 8px; background: rgba(255,116,38,.09); }
  .notify-map-step p { margin: 0; color: #f4d5c0 !important; }
  .notify-radius { display: flex; gap: 5px; margin: 4px 0; padding: 0; border: 0; }
  .notify-radius legend { width: 100%; margin-bottom: 4px; font-size: 12px; }
  .notify-radius button { flex: 1; padding: 7px 3px; }
  .notify-radius button[aria-pressed="true"] { background: #b94e18 !important; border: 2px solid #ffb06a !important; color: #fff !important; box-shadow: 0 0 0 2px rgba(255,116,38,.28); font-weight: 700; }
  .notify-enable { margin-top: 8px; padding: 7px; }
  .notify-areas { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 12px; }
  .notify-areas li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 7px; align-items: center; padding: 9px; border: 1px solid rgba(255,255,255,.09); border-radius: 8px; background: rgba(255,255,255,.035); cursor: pointer; }
  .notify-areas li:hover, .notify-areas li:focus-visible { border-color: rgba(255,176,106,.7); background: rgba(255,116,38,.10); outline: none; }
  .notify-area-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 650; }
  .notify-areas select { padding: 5px; font-size: 12px !important; cursor: pointer; }
  .notify-areas button { width: 27px; height: 27px; padding: 0; color: #f2b4a3 !important; font-size: 18px !important; line-height: 1; }
  .notify-empty { padding: 16px 10px; border: 1px dashed rgba(255,255,255,.16); border-radius: 8px; text-align: center; }

  .maplibregl-ctrl-group { background: rgba(13,15,18,.84) !important;
    border: 1px solid rgba(255,255,255,.10) !important; border-radius: 12px !important;
    box-shadow: none !important; }
  .maplibregl-ctrl-group button + button { border-top-color: rgba(255,255,255,.10) !important; }
  .maplibregl-ctrl-group button span { filter: invert(1) brightness(1.4); }

  .maplibregl-popup-content { background: #171a1f; color: var(--ink);
    border-radius: 10px; padding: 11px 26px 12px 14px; font-size: 13px;
    line-height: 1.42; box-shadow: none; }
  .maplibregl-popup-tip { border-top-color: #171a1f !important;
    border-bottom-color: #171a1f !important; }
  .maplibregl-popup-close-button { color: var(--ink-dim); font-size: 17px; padding: 2px 7px; }
  /* Au-dessus des nappes de vent et de fumée (399/400) et du réticule du centre
     (401), sous les panneaux (499+). `#map` n'a pas de `z-index` : il ne crée
     donc pas de contexte d'empilement et la fiche se place bien dans celui de
     la page, pas seulement dans la carte. */
  .maplibregl-popup { z-index: 450; }

  /* Fiches au clic : foyers, emprises brûlées, appareils et sonde météo
     partagent la même feuille de style — une seule fiche est ouverte à la
     fois, donc les blocs se ressemblent d'une couche à l'autre. Deux étages
     seulement : ce qui a été observé, puis l'air qu'il y fait. */
  .pop > b { font-size: 13.5px; }
  .pop .sub { display: block; margin-top: 1px; color: var(--ink-dim); font-size: 11.5px; }
  .pop .row { margin-top: 5px; }
  .pop .dim { color: var(--ink-dim); font-size: 11.5px; }
  .pop .big { margin-top: 6px; font-size: 21px; font-weight: 700; color: #ffc19c;
              letter-spacing: -.02em; }
  .pop .big .unit { font-size: 13px; font-weight: 600; }
  /* Composition du couvert : la barre est le fond de la ligne, pas un élément
     de plus — le pourcentage arrive en `--p` depuis le script. */
  .pop .cover { margin-top: 7px; display: grid; gap: 3px; }
  .pop .cover span { padding: 2px 7px; border-radius: 4px; font-size: 11.5px;
    display: flex; justify-content: space-between; gap: 10px;
    background: linear-gradient(90deg, rgba(255,107,26,.34) var(--p),
                                       rgba(255,255,255,.05) var(--p)); }
  .pop .cover span em { font-style: normal; color: var(--ink-dim); }
  .pop .meteo.sep { margin-top: 10px; padding-top: 9px;
                    border-top: 1px solid rgba(255,255,255,.11); }
  .pop .meteo .temp { font-size: 17px; font-weight: 700; color: #ffc19c; }
  .pop .meteo .wind { margin-top: 1px; font-size: 12px; color: #c7cbd0; }
  .pop button { margin-top: 8px; font: inherit; font-size: 12px; color: var(--ink);
    background: #21252b; border: 1px solid #363b43; border-radius: 7px;
    padding: 6px 10px; cursor: pointer; width: 100%; }
  .pop button:hover { background: #2c313a; }