/* ===== Design tokens ===== */
:root {
  --accent-drought: #B59567;
  --accent-fire: #D6845B;
  --card-accent: var(--accent-fire);
  --card-radius: 14px;
  --card-bg: #fff;
  --card-shadow: 0 1px 2px rgba(20,30,25,.06), 0 4px 14px rgba(20,30,25,.07);
  --card-shadow-hover: 0 2px 4px rgba(20,30,25,.08), 0 14px 32px rgba(20,30,25,.14);
  --ease-out: cubic-bezier(.22,.8,.3,1);
  --ease-spring: cubic-bezier(.34,1.4,.5,1);
}
body.theme-drought { --card-accent: var(--accent-drought); }
body.theme-fire { --card-accent: var(--accent-fire); }

html {
  scroll-behavior: smooth;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  margin: 0;
  padding: 20px;
  background-color: #f4f6f8;
  color: #333;
}

header {
  background: var(--card-bg);
  padding: 10px clamp(14px, 2vw, 20px);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  margin-bottom: 12px;
}

h1 {
  font-size: 18px;
  margin: 0;
}

.header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

.header-title-group {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.home-link {
  font-size: 20px;
  color: #2d5f3e;
  text-decoration: none;
  padding: 2px 6px;
  border-radius: 4px;
}

.home-link:hover {
  background: #f0f0ec;
}

.nav-home-link {
  margin-right: 4px;
  display: inline-flex;
  align-items: center;
}

/* Page d'accueil (choix entre les produits) */
.landing-body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  margin: 0;
  padding: 20px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background-color: #f4f6f8;
}

.landing-wrapper {
  max-width: 1040px;
  width: 100%;
}

.landing-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 32px;
}

.landing-header {
  text-align: center;
  flex: 1;
}

.landing-header h1 {
  font-size: 26px;
  margin: 0 0 6px 0;
  color: #222;
}

.landing-subtitle {
  color: #888;
  font-size: 13px;
  margin: 0;
}

.landing-grid {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(14px, 2.2vw, 24px);
}

.landing-grid > .landing-box {
  flex: 1 1 clamp(260px, 30%, 100%);
  min-width: 0;
}

.landing-grid-single {
  justify-content: center;
}

.landing-grid-single > .landing-box {
  flex: 0 1 380px;
}

/* Variante a largeur de carte FIXE : ajouter la classe "landing-grid-fixed"
   a un .landing-grid. Chaque carte fait --card-width (340px par defaut) ;
   elle ne retrecit que si l'ecran est plus etroit que cette largeur
   (mini ecrans), et ne s'etire jamais. Retirer la classe pour revenir
   aux cartes fluides qui se partagent la ligne. */
.landing-grid-fixed {
  --card-width: 340px;
  justify-content: center;
}

.landing-grid-fixed > .landing-box {
  flex: 0 1 var(--card-width);
  max-width: 100%;
}

/* Regroupement visuel des produits par categorie (secheresse / feu) sur
   la page d'accueil -- sous-titre discret + bandeau de couleur en haut
   de chaque carte pour un repérage rapide, sans surcharger le design. */
.landing-category {
  margin-bottom: 28px;
}

.landing-category:last-child {
  margin-bottom: 0;
}

.landing-category-title {
  font-size: 13px;
  font-weight: 700;
  color: #999;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin: 0 0 12px 4px;
}

/* Desactive le lissage/interpolation du navigateur sur les calques
   raster FWI (image overlay Leaflet) -- montre les vrais pixels bruts du
   plus-proche-voisin plutot qu'un flou visuel du a l'agrandissement. */
#fwi-map {
  background: #f0f1ee;
}

.leaflet-image-layer {
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}

.landing-box {
  box-sizing: border-box;
  position: relative;
  display: block;
  background: var(--card-bg);
  border-radius: var(--card-radius);
  padding: clamp(20px, 3vw, 28px) clamp(18px, 2.6vw, 24px);
  text-decoration: none;
  color: inherit;
  box-shadow: var(--card-shadow);
  transition: transform .35s var(--ease-spring), box-shadow .35s var(--ease-out);
  border-top: 4px solid transparent;
  overflow: hidden;
  isolation: isolate;
}

.landing-box-drought {
  border-top-color: var(--accent-drought);
  --card-accent: var(--accent-drought);
}

.landing-box-fire {
  border-top-color: var(--accent-fire);
  --card-accent: var(--accent-fire);
}

/* Halo de couleur d'accent qui apparait au survol */
.landing-box::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--card-accent) 16%, transparent), transparent 60%);
  opacity: 0;
  transition: opacity .4s var(--ease-out);
}

.landing-box:hover,
.landing-box:focus-visible {
  transform: translateY(-5px);
  box-shadow: var(--card-shadow-hover);
}

.landing-box:hover::before,
.landing-box:focus-visible::before {
  opacity: 1;
}

.landing-box:active {
  transform: translateY(-1px) scale(.99);
  transition-duration: .1s;
}

.landing-box:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--card-accent) 55%, transparent);
  outline-offset: 3px;
}

.landing-badge {
  position: absolute;
  top: 16px;
  right: 16px;
}

.landing-box h2 {
  margin: 0 0 10px 0;
  font-size: 20px;
  padding-right: 70px; /* reserve la place du badge BETA (absolument positionne, ne participe pas au flux normal) -- sans ca, un titre long passe dessous au lieu de s'enrouler avant */
  color: #2d5f3e;
}

.landing-tagline {
  color: #555;
  font-size: 14px;
  margin: 0 0 16px 0;
  line-height: 1.4;
}

.landing-date-badge {
  margin-top: 4px;
}

.map-date-badge-header {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  color: #1a6b3c;
  background: #e6f4ea;
  border: 1px solid #a8d9be;
  border-radius: 12px;
  padding: 3px 10px;
  white-space: nowrap;
}

.beta-badge {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #a35a00;
  background: #fdf0dc;
  border: 1px solid #e67e22;
  border-radius: 4px;
  padding: 2px 7px;
  white-space: nowrap;
}

.lock-icon {
  vertical-align: -1px; /* alignement fin avec le texte -- un SVG inline se place legerement au-dessus de la ligne de base par defaut */
  margin-right: 2px;
}

.lang-select {
  padding: 6px 10px;
  border-radius: 4px;
  border: 1px solid #ccc;
  font-size: 13px;
  font-weight: 600;
  flex-shrink: 0;
}

.header-hint {
  color: #777;
  font-size: 12px;
  margin: 2px 0 0 0;
}

.discoch-hint-top {
  margin-bottom: 10px;
}

select {
  padding: 8px 12px;
  border-radius: 4px;
  border: 1px solid #ccc;
  font-size: 14px;
}

main {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.page-section {
  scroll-margin-top: 52px; /* hauteur de la barre sticky, evite qu'elle ne cache le haut de section au clic */
}

/* Barre de navigation collee en haut de l'ecran (pleine largeur), suit le
   defilement mais ne recouvre jamais le contenu grace au scroll-margin-top
   ci-dessus sur les sections cibles. */
.sticky-nav {
  position: sticky;
  top: 0;
  z-index: 2000;
  display: flex;
  gap: 4px;
  background: white;
  padding: 8px 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  border-radius: 8px;
  margin: 0 0 12px 0;
}

.nav-btn {
  padding: 7px 16px;
  font-size: 13px;
  border: none;
  border-radius: 5px;
  background: #f4f6f8;
  color: #333;
  cursor: pointer;
  transition: background .2s var(--ease-out), color .2s, transform .2s var(--ease-spring);
}

.nav-btn:hover {
  background: #e0e4e8;
  transform: translateY(-1px);
}

.nav-btn.active {
  background: #2d5f3e;
  color: white;
}

/* Bandeau records : element normal, defile avec le contenu (pas sticky) */
.record-banner {
  background: #fdecea;
  border: 1px solid #e34948;
  border-radius: 6px;
  padding: 10px 14px;
  margin-bottom: 12px;
  font-size: 13px;
  color: #a02b28;
}

/* Supprime le contour de focus par defaut du navigateur sur les regions
   Leaflet cliquables (sinon rectangle noir/bleu disgracieux au clic) */
.leaflet-interactive:focus {
  outline: none;
}

/* Masque le controle d'attribution Leaflet sur chaque mini-carte -- credit
   regroupe une seule fois dans le footer de page a la place */
.leaflet-control-attribution {
  display: none;
}

.chart-block {
  background: var(--card-bg);
  padding: clamp(14px, 2vw, 22px);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  transition: box-shadow .35s var(--ease-out);
}

.chart-block:hover {
  box-shadow: var(--card-shadow-hover);
}

.group-box {
  /* Regroupe carte + graphique en UNE SEULE boite visuelle (au lieu de 2
     cartes empilees avec un espace entre elles) -- rendu plus propre et
     minimaliste, demande explicitement. Le style de carte (fond, ombre,
     coins arrondis) migre ICI ; les .chart-block imbriques perdent le
     leur (juste ci-dessous), remplace par un simple separateur discret. */
  background: var(--card-bg);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  transition: box-shadow .35s var(--ease-out);
  overflow: hidden; /* les coins arrondis du conteneur restent nets meme si un enfant a un fond oppose */
}

.group-box:hover {
  box-shadow: var(--card-shadow-hover);
}

.group-box .chart-block {
  background: none;
  box-shadow: none;
  border-radius: 0;
  border-top: none; /* l'accent est porte par la boite englobante */
}

.group-box .chart-block + .chart-block {
  border-top: 1px solid #e5e5e5; /* separateur discret entre carte et graphique, remplace l'espace/ombre qui les distinguait avant */
}

.fwi-national-map {
  width: 100%; /* remplit la largeur de sa colonne de grille -- se redimensionne pour tenir dans la boite, plutot qu'une largeur fixe qui forcait la boite a s'elargir ou a deborder */
  aspect-ratio: 1.52;
  border-radius: 6px;
}

/* Curseur en croix plutot que la main de Leaflet par defaut (deplacement
   de carte) -- la main obscurcissait le contour du pixel en surbrillance
   (signale en pratique). Convention plus habituelle pour une selection
   precise de cellule (SIG, retouche photo). !important necessaire pour
   depasser les classes internes de Leaflet (.leaflet-grab), appliquees
   dynamiquement selon l'etat d'interaction. */
.fwi-national-map.leaflet-grab,
.fwi-national-map .leaflet-interactive {
  cursor: crosshair !important;
}

.fwi-layout {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

#fwi-controls-block {
  width: 320px; /* fixe, dimensionnee pour la rangee de boutons dates -- fit-content laissait a tort le texte long de la legende (plus large que les boutons) dicter la largeur totale */
  flex-shrink: 0;
  box-sizing: border-box;
  position: sticky;
  top: 62px; /* sous la barre de navigation collante (52px) + une petite marge */
  max-height: calc(100vh - 82px);
  overflow-y: auto; /* si le contenu (legende large) depasse la hauteur visible, on scrolle DANS la boite plutot que de la laisser deborder */
}

.fwi-main-content {
  flex: 1;
  min-width: 0; /* necessaire pour qu'un enfant flex puisse retrecir en dessous de sa largeur naturelle (sinon les cartes larges forcent ce conteneur a deborder) */
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* En dessous de ce seuil, une barre laterale collante prend trop de
   place et nuit a la lisibilite -- revient a un empilement vertical
   classique, comme avant cette restructuration. */
@media (max-width: 1100px) {
  .fwi-layout {
    flex-direction: column;
  }
  #fwi-controls-block {
    position: static;
    width: 100%;
    max-width: 842px;
    max-height: none;
    overflow-y: visible;
    margin: 0 auto;
  }
}

#pixel-maps-chart-block {
  width: 100%;
  box-sizing: border-box;
  margin: 0 auto;
  /* PAS de max-width -- aligne exactement sur aggregated-chart-block et
     hourly-chart-block (les 3 boites utilisent la meme largeur
     disponible reelle, plutot que 3 valeurs fixes qui pouvaient diverger). */
}

#aggregated-chart-block {
  width: 100%;
  box-sizing: border-box;
  margin: 0 auto;
  /* PAS de max-width ici -- carte censee remplir la fenetre (vue
     "alerte", premiere lecture), contrairement aux 2 autres boites qui
     restent alignees sur la largeur compacte des cartes de detail. */
}

.aggregated-map {
  width: 100%; /* remplit toute la largeur de la boite -- plus de hauteur fixe qui bridait la largeur via aspect-ratio */
  aspect-ratio: 1.52;
  border-radius: 6px;
}


#pixel-maps-chart-block #methodology-note {
  max-width: 900px;
  white-space: normal;
}

#hourly-chart-block {
  width: 100%;
  box-sizing: border-box;
  margin: 0 auto;
  /* PAS de max-width -- aligne exactement sur les 2 autres boites */
}

#hourly-chart-plot {
  min-height: 320px;
}

.section-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.section-header h2 {
  margin: 0;
  font-size: 18px;
}

.header-right-group {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

#hourly-header-right-group {
  flex-shrink: 1; /* annule flex-shrink:0 herite -- ici, DEUX selects doivent pouvoir retrecir/passer a la ligne sur ecran etroit, contrairement a l'usage habituel (un seul controle) de cette classe partagee */
  flex-wrap: wrap;
  min-width: 0;
}

#hourly-header-right-group select {
  min-width: 0;
  max-width: 100%;
}

/* Selecteur de jour -- un controle de filtre au sein du bloc carte, pas
   un menu de navigation entre sections (d'ou un style distinct de
   .sticky-nav/.nav-btn). */
/* Barre d'outils flottante en haut de la carte FWI (jours a gauche,
   indicateur + telechargement a droite) -- meme esprit que les controles
   Leaflet natifs (+/-), pas une rangee de controles hors de la carte. */
.map-toolbar {
  position: absolute;
  top: 8px;
  left: 8px;
  right: 8px;
  z-index: 500;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  pointer-events: none; /* le conteneur ne bloque pas le glisser-deposer de la carte */
}

.map-toolbar > * {
  pointer-events: auto; /* les vrais controles, eux, restent cliquables */
}

/* Barre d'outils COMMUNE aux deux cartes (jours + indicateur) -- au-dessus
   des deux, pas flottante sur l'une d'elles -- evite la duplication et
   garantit que les deux cartes affichent toujours le meme jour/indicateur. */
.shared-map-toolbar {
  display: flex;
  flex-wrap: wrap; /* sans ca, le contenu (jours + badge modele + menu) force le conteneur a deborder au lieu de se replier sur 2 lignes -- cause probable du debordement de la boite sur ecran etroit */
  justify-content: center; /* pas space-between -- dans la barre laterale etroite, chaque groupe se replie souvent sur sa propre ligne, et space-between le laissait alors colle a gauche (aucun 2e element sur la meme ligne pour "repousser"), creant un vide asymetrique a droite */
  align-items: center;
  gap: 8px;
  margin: 0 auto 10px;
  max-width: 802px;
}

.day-selector-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.model-source-badge {
  font-size: 11px;
  color: #777;
  background: rgba(0,0,0,0.05);
  padding: 3px 8px;
  border-radius: 4px;
}

.maps-container {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  justify-content: center; /* centre le bloc compact dans son ensemble, plutot que de centrer chaque carte dans une cellule surdimensionnee */
  gap: 12px;
  width: max-content; /* le conteneur lui-meme adopte la largeur de son contenu -- sinon il reste un bloc pleine largeur malgre le centrage interne des cellules */
  max-width: 100%;
  margin: 0 auto;
}

@media (max-width: 800px) {
  .maps-container { grid-template-columns: max-content; width: 100%; } /* empilees verticalement sur petit ecran */
}

#aggregated-maps-container {
  display: block; /* pas une grille ici -- une seule carte qui doit remplir toute la largeur, pas une cellule de grille dimensionnee a son contenu (incompatible avec un enfant en width:100%, cause de la disparition de la carte) */
  width: 100% !important; /* annule width:max-content herite de .maps-container -- meme conflit circulaire avec un enfant en width:100% */
}

#pixel-maps-container {
  display: flex !important; /* PAS grid -- bug Safari confirme par diagnostic : la hauteur derivee par aspect-ratio des enfants n'est pas correctement propagee a la hauteur de ligne d'une grille CSS, le conteneur se retrouve reduit a la hauteur du gap seul (12px, exactement notre valeur de gap -- aucun hasard). flex fonctionne de facon fiable pour ce meme besoin (deja confirme sur aggregated-maps-container). */
  flex-wrap: wrap;
  width: 100% !important;
  /* Chaque carte prend une part egale de la largeur (equivalent de
     1fr en grid) -- nombre de cartes fixe dynamiquement en JS
     (loadAllCards) selon l'indicateur (2 pour la meteo, 3 pour FWI). */
}
#pixel-maps-container > .mini-map-wrapper {
  flex: 1 1 0;
  min-width: 0; /* necessaire pour qu'un enfant flex puisse retrecir en dessous de sa largeur naturelle */
}


@media (max-width: 900px) {
  #pixel-maps-container { flex-direction: column !important; } /* empile verticalement en dessous de ce seuil -- cartes cote a cote deviennent trop etroites pour rester lisibles */
}

.map-card-header {
  position: absolute;
  top: 8px;
  left: 8px;
  right: 8px;
  z-index: 1000; /* augmente de 500 -- pas assez pour depasser de facon fiable certains elements internes de Leaflet (controles, panes), rendant le dropdown non cliquable en pratique (les clics atterrissaient sur la carte en dessous) */
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  pointer-events: none; /* laisse passer le glisser/survol de la carte en dessous, sauf sur les elements cliquables eux-memes */
}

.map-card-title {
  font-size: 12px;
  font-weight: 600;
  color: #333;
  margin: 0;
  background: rgba(255,255,255,0.85);
  padding: 3px 8px;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}

.map-run-selector {
  font-size: 12px;
  font-weight: 600;
  color: #333;
  background: rgba(255,255,255,0.92);
  border: none;
  padding: 3px 8px;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
  cursor: pointer;
  pointer-events: auto; /* redevient cliquable malgre le pointer-events:none du conteneur parent -- cause du "dropdown incliquable" signale en pratique */
}

.download-btn-inline {
  position: static; /* annule le positionnement absolu par defaut de .download-btn -- gere par le flex de l'en-tete superpose */
  pointer-events: auto; /* redevient cliquable malgre le pointer-events:none du conteneur parent */
  box-shadow: 0 1px 4px rgba(0,0,0,0.25);
}

.shared-legend-area {
  display: flex;
  flex-direction: column; /* empile les blocs (valeurs/IQR) verticalement -- la barre laterale (280px) est trop etroite pour les cote a cote comme dans l'ancienne mise en page pleine largeur */
  gap: 12px;
  align-items: center; /* centre chaque bloc de legende dans la boite, plutot que de les etirer sur toute la largeur */
  width: fit-content; /* ajustee a son contenu -- comme la pilule du badge modele -- plutot qu'etiree sur toute la largeur de la barre laterale */
  max-width: 100%;
  margin: 0 auto 16px;
  padding: 8px 12px;
  background: rgba(0,0,0,0.03);
  border-radius: 6px;
  box-sizing: border-box;
}

.shared-legend-details {
  display: contents; /* le details lui-meme ne doit pas creer de boite -- laisse le flex du parent gerer les blocs */
}

.legend-info-summary {
  display: none; /* cache par defaut -- visible seulement en dessous du seuil de largeur, cf. media query */
  cursor: pointer;
  font-size: 18px;
  list-style: none;
  color: #555;
  padding: 4px 8px;
}
.legend-info-summary::-webkit-details-marker { display: none; } /* Safari : masque le triangle natif, on gere l'apparence nous-memes */

@media (max-width: 900px) {
  .shared-legend-details { display: block; } /* redevient un vrai conteneur repliable a cette largeur */
  .legend-info-summary { display: inline-block; }
  .shared-legend-block { display: none; } /* replie par defaut -- le clic sur le bouton info (natif <details>) le revele */
  .shared-legend-details[open] .shared-legend-block { display: block; }
}

.shared-legend-block {
  text-align: left;
  min-width: 180px;
  flex: 1;
}

#shared-legend-discrete-0, #shared-legend-discrete-1 {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
}

#shared-legend-discrete-0 .legend-item-compact,
#shared-legend-discrete-1 .legend-item-compact {
  display: inline-flex;
  align-items: center;
}

.day-selector {
  display: flex;
  gap: 4px;
}

.day-btn {
  padding: 5px 10px;
  font-size: 12px;
  border: none;
  border-radius: 5px;
  background: rgba(255,255,255,0.92);
  color: #333;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,0.25);
  transition: background .2s var(--ease-out), color .2s, transform .2s var(--ease-spring);
}

.day-btn:active { transform: scale(.94); }

.day-btn:hover {
  background: white;
}

.day-btn.active {
  background: #2d5f3e;
  color: white;
}

.map-toolbar-right {
  display: flex;
  gap: 6px;
  align-items: center;
}

/* .download-btn est normalement positionne en absolu (usage standalone
   sur les autres pages, ex. VHI) -- ici il vit dans une rangee flex, il
   faut annuler ce positionnement pour qu'il s'y insere normalement au
   lieu de flotter par-dessus le dropdown. */
.map-toolbar-right .download-btn {
  position: static;
  box-shadow: 0 1px 4px rgba(0,0,0,0.25);
}

/* Legende discrete compacte (5 niveaux) -- une ligne par element, pas de
   retour a la ligne (le nom complet du danger reste disponible au
   survol via le tooltip, deja en place). */
.legend-item-compact {
  white-space: nowrap;
  display: block;
  font-size: 12px;
}

/* Tooltip FWI "maison" (pas L.Popup de Leaflet, qui ne sait pas inverser
   sa fleche selon la direction d'ouverture) -- positionne en JS via
   left/top calcules a partir de latLngToContainerPoint, jamais via
   l'auto-pan de Leaflet qui deplacerait la carte. */
.fwi-tooltip-custom {
  position: absolute;
  z-index: 1000;
  pointer-events: none;
  background: white;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 13px;
  color: #333;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  white-space: nowrap;
}

.map-indicator-select {
  padding: 5px 8px;
  font-size: 12px;
  border: none;
  border-radius: 5px;
  background: rgba(255,255,255,0.92);
  box-shadow: 0 1px 4px rgba(0,0,0,0.25);
  cursor: pointer;
  max-width: 180px;
  text-overflow: ellipsis;
}

.geoloc-toolbar {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-top: 10px;
  margin-bottom: 8px;
}

.npa-input {
  flex: 1;
  min-width: 0;
  padding: 5px 8px;
  font-size: 12px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.geoloc-btn {
  padding: 5px 9px;
  font-size: 13px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background: white;
  cursor: pointer;
  flex-shrink: 0;
}

.geoloc-btn.active {
  background: #2980b9;
  color: white;
  border-color: #2980b9;
}

.geoloc-status {
  font-size: 11px;
  color: #666;
  margin: 4px 0 14px 0;
}

.header-select {
  padding: 6px 10px;
  font-size: 13px;
  flex-shrink: 0;
}

.header-select-group {
  display: flex;
  gap: 8px;
}

.back-button {
  padding: 6px 12px;
  font-size: 13px;
  border-radius: 4px;
  border: 1px solid #ccc;
  background: #f4f6f8;
  cursor: pointer;
  flex-shrink: 0;
}

.back-button:hover {
  background: #e8eaed;
}

.chart-subtitle {
  color: #777;
  font-size: 13px;
  margin-top: -8px;
  margin-bottom: 15px;
}

.chart-note {
  color: #999;
  font-size: 12px;
  margin-top: 16px;
  margin-bottom: 0;
}

.barplot-resolution-note {
  color: #888;
  font-size: 11.5px;
  font-style: italic;
  margin: 0 0 4px;
  min-height: 1.2em; /* evite un saut de mise en page quand la note apparait/disparait */
}

.barplot-wrapper {
  position: relative;
}

#chart-container {
  min-height: 460px;
  width: 100%; /* meme raisonnement que .chart-wrapper -- enfant flex, sans ca peut se dimensionner selon le contenu Plotly plutot que l'espace disponible */
  min-width: 0;
}

.regional-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-start;
}

.regional-col {
  flex: 1 1 min(100%, 440px);
  min-width: 0;
}

.extreme-days-barplot {
  min-height: 220px;
  margin-top: 10px;
  width: 100%; /* enfant flex DIRECT de .chart-wrapper (contrairement a deficit-chart, qui a #chart-container jouant ce role) -- meme raisonnement, piece manquante qui expliquait pourquoi ce graphique-ci restait en debordement malgre la correction de .chart-wrapper lui-meme */
  min-width: 0;
}

/* Grille des 4 mini-cartes (vue d'ensemble) : 2x2 sur ecran moyen, 4 en
   ligne sur tres grand ecran, empilees sur mobile */
.maps-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.mini-map-panel {
  flex: 1 1 clamp(240px, calc(50% - 14px), 100%);
  min-width: 0;
}

@media (min-width: 1400px) {
  .mini-map-panel {
    flex-basis: calc(25% - 11px);
  }
}

.mini-map-title {
  font-size: 13px;
  font-weight: 500;
  color: #555;
  margin: 0 0 6px 0;
  text-align: center;
  min-height: 2.6em; /* reserve la place de 2 lignes -- sinon un titre plus long qui s'enroule pousse SA carte vers le bas d'une ligne, decalant les cartes entre elles (l'autre titre, reste sur 1 ligne, ne bouge pas) */
  display: flex;
  align-items: center;
  justify-content: center;
}

.section-title {
  font-size: 17px;
  font-weight: 600;
  color: #2d5f3e;
  margin: 0 0 12px 0;
  text-align: left;
}

.mini-map-wrapper,
.chart-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%; /* SANS ca, un enfant flex peut se dimensionner selon la largeur intrinseque de son contenu (le graphique Plotly) plutot que de respecter l'espace disponible dans sa colonne -- cause du debordement signale quand les 2 graphiques de l'analyse regionale sont juxtaposes sur une ligne */
  min-width: 0; /* necessaire en complement de width:100% -- un enfant flex a min-width:auto par defaut, qui peut forcer un debordement si le contenu (SVG Plotly) a sa propre largeur minimale intrinseque superieure a l'espace disponible */
  /* Centre le contenu (carte) dans son enveloppe -- si un ecart mineur
     de dimensionnement subsiste entre la carte (contrainte par
     aspect-ratio) et son conteneur, le flux de bloc normal l'aurait
     ancree en haut-gauche par defaut (signale : cartes legerement
     excentrees). Centrer est une position plus naturelle et evite ce
     symptome quelle qu'en soit la cause exacte residuelle. */
}

.download-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 500;
  width: 26px;
  height: 26px;
  border-radius: 5px;
  border: none;
  background: rgba(255,255,255,0.9);
  box-shadow: 0 1px 4px rgba(0,0,0,0.25);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  color: #333;
}

.download-btn:hover {
  background: white;
}

.mini-map {
  width: 100%;
  aspect-ratio: 14 / 9;
  border-radius: 6px;
  cursor: pointer;
}

#harmonisation-maps-grid {
  max-width: 1400px;
  margin-inline: auto;
  justify-content: center; /* cartes centrees, y compris la derniere seule sur sa ligne */
}

#harmonisation-maps-grid > .mini-map-panel {
  flex-grow: 0; /* largeur fixe par la base : une carte seule sur sa ligne reste centree, ne s'etire pas */
  flex-basis: clamp(300px, calc(50% - 14px), 100%); /* seulement 2 cartes ici : on les garde grandes plutot que 4 a 25% */
}

@media (min-width: 1100px) {
  #harmonisation-maps-grid > .mini-map-panel {
    flex-basis: calc(33.333% - 10px); /* 3 cartes cote a cote sur grand ecran */
  }
}

#harmonisation-maps-grid .mini-map {
  aspect-ratio: 8 / 5; /* proportions de l'emprise de la Suisse (~1,6) : la carte colle aux limites sans marges vides */
}

.discoch-map {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 6px;
}

/* Legende en degrade continu (probabilite 0-1), plutot que des vignettes
   discretes -- coherent avec la nature continue de la donnee */
.discoch-legend-overlay {
  position: absolute;
  bottom: 10px;
  left: 10px;
  z-index: 500;
  background: rgba(255,255,255,0.92);
  padding: 8px 12px;
  border-radius: 6px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.25);
  max-width: 220px;
}

/* Variante haut-gauche -- utilisee sur fwi_national.html (deux cartes,
   legende en haut pour ne pas interferer avec le bas de carte). Modificateur
   plutot que de changer .discoch-legend-overlay directement, pour ne pas
   affecter les autres pages qui l'utilisent en bas (waldbrand.html, etc.) */
.discoch-legend-overlay.legend-top-left {
  bottom: auto;
  top: 10px;
}

.discoch-legend-title {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #555;
  margin-bottom: 4px;
}

.discoch-legend-bar {
  width: 100%;
  height: 12px;
  border-radius: 4px;
  background: linear-gradient(to right, rgb(46,139,87) 0%, rgb(240,200,40) 50%, rgb(200,40,30) 100%);
  border: 1px solid rgba(0,0,0,0.15);
  box-sizing: border-box;
}

.discoch-legend-ticks {
  display: flex;
  justify-content: space-between;
  font-size: 10.5px;
  color: #888;
  margin-top: 3px;
}

/* Bloc slider temporel */
.discoch-time-box {
  margin-top: 14px;
  padding: 10px 14px 8px;
  background: #f8f9f7;
  border-radius: 8px;
  border: 1px solid #e5e5e0;
}

.discoch-time-date {
  display: block;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 6px;
  color: #333;
}

.discoch-time-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.discoch-time-header input[type="range"] {
  flex: 1;
  height: 20px;
}

.discoch-play-btn {
  border: 1px solid #d8d8d2;
  background: white;
  border-radius: 6px;
  width: 30px;
  height: 26px;
  font-size: 13px;
  cursor: pointer;
  flex: none;
}

.discoch-play-btn:hover {
  background: #f0f0ec;
}

.discoch-time-ticks-row {
  display: flex;
  justify-content: space-between;
  font-size: 9.5px;
  color: #999;
  margin-top: 3px;
  padding: 0 2px;
  font-variant-numeric: tabular-nums;
}

.map-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
  font-size: 11px;
  color: #555;
  justify-content: center;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
}

.legend-swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  border: 1px solid rgba(0,0,0,0.15);
}

.app-footer {
  margin-top: 20px;
  padding: 18px clamp(14px, 2vw, 20px);
  background: var(--card-bg);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  font-size: 11px;
  color: #666;
  line-height: 1.7;
}

.app-footer .footer-publisher {
  font-size: 13px;
  font-weight: 700;
  color: #2d5f3e;
  margin-bottom: 6px;
}

.app-footer .footer-sources {
  color: #888;
}

.app-footer .footer-disclaimer {
  font-style: italic;
  color: #999;
  margin-top: 6px;
}

.app-footer .footer-version {
  color: #bbb;
  margin-top: 6px;
}

/* ===== Animations d'entree =====
   fill-mode "backwards" (et non "both") : une fois l'animation finie,
   aucune transformation residuelle ne reste sur l'element -- evite de
   creer un contexte d'empilement permanent autour des cartes Leaflet. */
@keyframes card-in {
  from { opacity: 0; transform: translateY(18px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

.landing-category-title,
.landing-box,
main > .chart-block,
main > .group-box,
main > .page-section,
header,
.sticky-nav {
  animation: card-in .6s var(--ease-out) backwards;
}

.landing-box:nth-child(1), main > :nth-child(1) { animation-delay: .05s; }
.landing-box:nth-child(2), main > :nth-child(2) { animation-delay: .13s; }
.landing-box:nth-child(3), main > :nth-child(3) { animation-delay: .21s; }
.landing-box:nth-child(4), main > :nth-child(4) { animation-delay: .29s; }
main > :nth-child(n+5) { animation-delay: .35s; }
.landing-category:nth-of-type(2) .landing-box { animation-delay: .25s; }

.mini-map-panel { animation: card-in .5s var(--ease-out) backwards; }
.mini-map-panel:nth-child(2) { animation-delay: .08s; }
.mini-map-panel:nth-child(3) { animation-delay: .16s; }
.mini-map-panel:nth-child(4) { animation-delay: .24s; }

.mini-map { transition: box-shadow .3s var(--ease-out), transform .3s var(--ease-spring); }
.mini-map:hover { box-shadow: 0 4px 14px rgba(0,0,0,.18); }

@media (max-width: 600px) {
  body { padding: 12px; }
  .sticky-nav { overflow-x: auto; padding: 8px 12px; scrollbar-width: none; }
  .sticky-nav::-webkit-scrollbar { display: none; }
  .nav-btn { white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-delay: 0s !important;
    transition-duration: .001ms !important;
  }
  html { scroll-behavior: auto; }
}


/* ===== Interrupteur clair / sombre (injecte par theme.js) ===== */
.theme-switch {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 3000;
  width: 58px;
  height: 30px;
  padding: 0;
  border: 1px solid rgba(128,128,128,.35);
  border-radius: 999px;
  background: #e9edea;
  color: #6b7570;
  cursor: pointer;
  box-shadow: var(--card-shadow);
  transition: background-color .35s var(--ease-out), border-color .35s, transform .2s var(--ease-spring), box-shadow .3s;
  -webkit-tap-highlight-color: transparent;
}
.theme-switch:hover { transform: scale(1.06); box-shadow: var(--card-shadow-hover); }
.theme-switch:active { transform: scale(.95); }
.theme-switch:focus-visible { outline: 3px solid color-mix(in srgb, var(--card-accent) 60%, transparent); outline-offset: 2px; }
.theme-switch .ts-icon { position: absolute; top: 7px; }
.theme-switch .ts-sun { left: 8px; color: #e8a33d; }
.theme-switch .ts-moon { right: 8px; color: #8a948f; }
.theme-switch .ts-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.3);
  transition: transform .4s var(--ease-spring), background-color .3s;
}
html[data-theme="dark"] .theme-switch { background: #2a3431; border-color: #46504d; }
html[data-theme="dark"] .theme-switch .ts-knob { transform: translateX(28px); background: #cfd8d3; }
html[data-theme="dark"] .theme-switch .ts-sun { color: #8a948f; }
html[data-theme="dark"] .theme-switch .ts-moon { color: #f2d27a; }

/* ===== Mode sombre ===== */
html { color-scheme: light; }
html[data-theme="dark"] {
  color-scheme: dark;
  --card-bg: #1b2220;
  --card-shadow: 0 1px 2px rgba(0,0,0,.4), 0 4px 14px rgba(0,0,0,.35);
  --card-shadow-hover: 0 2px 4px rgba(0,0,0,.5), 0 14px 32px rgba(0,0,0,.55);
  --d-bg: #121715;
  --d-surface-2: #242d2a;
  --d-border: #323c38;
  --d-text: #e3e7e4;
  --d-muted: #a9b3ae;
  --d-faint: #7f8b86;
  --d-green: #6fbf8a;
}

body, header, .sticky-nav, .chart-block, .group-box, .app-footer, .landing-box, .nav-btn, select, .map-legend {
  transition-property: background-color, color, border-color, box-shadow, transform;
  transition-duration: .3s;
}
.landing-box { transition: transform .35s var(--ease-spring), box-shadow .35s var(--ease-out), background-color .3s, color .3s; }

html[data-theme="dark"] body,
html[data-theme="dark"] .landing-body { background-color: var(--d-bg); color: var(--d-text); }
html[data-theme="dark"] .sticky-nav { background: var(--card-bg); }
html[data-theme="dark"] .nav-btn { background: var(--d-surface-2); color: var(--d-text); }
html[data-theme="dark"] .nav-btn:hover { background: #2f3a36; }
html[data-theme="dark"] .nav-btn.active { background: #2d5f3e; color: #fff; }
html[data-theme="dark"] .home-link { color: var(--d-green); }
html[data-theme="dark"] .home-link:hover { background: var(--d-surface-2); }

html[data-theme="dark"] .landing-header h1 { color: var(--d-text); }
html[data-theme="dark"] .landing-subtitle,
html[data-theme="dark"] .landing-category-title,
html[data-theme="dark"] .chart-note,
html[data-theme="dark"] .barplot-resolution-note,
html[data-theme="dark"] .discoch-time-ticks-row,
html[data-theme="dark"] .discoch-legend-ticks,
html[data-theme="dark"] .app-footer .footer-sources,
html[data-theme="dark"] .app-footer .footer-disclaimer { color: var(--d-faint); }
html[data-theme="dark"] .app-footer .footer-version { color: #5f6b66; }
html[data-theme="dark"] .landing-tagline,
html[data-theme="dark"] .mini-map-title,
html[data-theme="dark"] .legend-info-summary,
html[data-theme="dark"] .map-legend,
html[data-theme="dark"] .discoch-legend-title,
html[data-theme="dark"] .app-footer,
html[data-theme="dark"] .geoloc-status,
html[data-theme="dark"] .chart-subtitle,
html[data-theme="dark"] .header-hint,
html[data-theme="dark"] .model-source-badge { color: var(--d-muted); }
html[data-theme="dark"] .landing-box h2,
html[data-theme="dark"] .section-title,
html[data-theme="dark"] .app-footer .footer-publisher { color: var(--d-green); }

html[data-theme="dark"] .map-date-badge-header { color: #8fd3a8; background: #17352a; border-color: #2a5a43; }
html[data-theme="dark"] .beta-badge { color: #f0b45c; background: #3b2a12; border-color: #8a5a1c; }
html[data-theme="dark"] .record-banner { color: #f3a7a4; background: #3a1a19; border-color: #a33a38; }

html[data-theme="dark"] select,
html[data-theme="dark"] .lang-select,
html[data-theme="dark"] .npa-input,
html[data-theme="dark"] .geoloc-btn,
html[data-theme="dark"] .back-button,
html[data-theme="dark"] .discoch-play-btn {
  background-color: var(--d-surface-2);
  color: var(--d-text);
  border-color: #46504d;
}
html[data-theme="dark"] .back-button:hover,
html[data-theme="dark"] .discoch-play-btn:hover { background: #2f3a36; }
html[data-theme="dark"] .geoloc-btn.active { background: #2980b9; border-color: #2980b9; color: #fff; }

html[data-theme="dark"] .group-box .chart-block + .chart-block { border-top-color: var(--d-border); }
html[data-theme="dark"] .shared-legend-area,
html[data-theme="dark"] .model-source-badge { background: rgba(255,255,255,.05); }
html[data-theme="dark"] .discoch-time-box { background: var(--d-surface-2); border-color: var(--d-border); }
html[data-theme="dark"] .discoch-time-date { color: var(--d-text); }

/* Controles flottants sur les cartes */
html[data-theme="dark"] .map-card-title,
html[data-theme="dark"] .map-run-selector,
html[data-theme="dark"] .map-indicator-select,
html[data-theme="dark"] .day-btn,
html[data-theme="dark"] .download-btn,
html[data-theme="dark"] .discoch-legend-overlay {
  background: rgba(27,34,32,.92);
  color: var(--d-text);
}
html[data-theme="dark"] .day-btn:hover,
html[data-theme="dark"] .download-btn:hover { background: #2a3431; }
html[data-theme="dark"] .day-btn.active { background: #2d5f3e; color: #fff; }

/* Tooltips et popups */
html[data-theme="dark"] .fwi-tooltip-custom,
html[data-theme="dark"] .leaflet-tooltip,
html[data-theme="dark"] .leaflet-popup-content-wrapper,
html[data-theme="dark"] .leaflet-popup-tip {
  background: #232c29;
  color: var(--d-text);
  border-color: var(--d-border);
}
html[data-theme="dark"] .leaflet-tooltip-top:before { border-top-color: #232c29; }
html[data-theme="dark"] .leaflet-tooltip-bottom:before { border-bottom-color: #232c29; }
html[data-theme="dark"] .leaflet-tooltip-left:before { border-left-color: #232c29; }
html[data-theme="dark"] .leaflet-tooltip-right:before { border-right-color: #232c29; }
html[data-theme="dark"] .leaflet-bar a,
html[data-theme="dark"] .leaflet-bar a:hover { background: #232c29; color: var(--d-text); border-bottom-color: var(--d-border); }

/* Cartes : fond et fond de tuiles (le raster FWI et les polygones ne sont pas touches) */
html[data-theme="dark"] .leaflet-container,
html[data-theme="dark"] #fwi-map { background: #1a201f; }
html[data-theme="dark"] .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(.92) contrast(.92); }
html[data-theme="dark"] .mini-map:hover { box-shadow: 0 4px 14px rgba(0,0,0,.6); }
html[data-theme="dark"] .legend-swatch { border-color: rgba(255,255,255,.2); }

/* Curseur de plage de dates (waldbrand) */
html[data-theme="dark"] .range-slider-track-bg { background: #38433f; }
html[data-theme="dark"] .range-slider-labels { color: var(--d-muted); }
html[data-theme="dark"] .range-slider-wrapper input[type="range"]::-webkit-slider-thumb { border-color: #1b2220; }
html[data-theme="dark"] .range-slider-wrapper input[type="range"]::-moz-range-thumb { border-color: #1b2220; }

/* Graphiques Plotly : texte et fonds adaptes par theme.js ; ici le reste */
html[data-theme="dark"] .js-plotly-plot .modebar-btn path { fill: var(--d-muted); }
html[data-theme="dark"] .js-plotly-plot .modebar-btn:hover path { fill: var(--d-text); }
html[data-theme="dark"] .js-plotly-plot .modebar { background: transparent !important; }

@media (max-width: 600px) {
  .theme-switch { right: 10px; bottom: 10px; }
}


/* ===== Analyse de fusion (page d'harmonisation) ===== */
.fusion-kpis {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 4px 0 16px;
}
.fusion-kpi {
  flex: 1 1 170px;
  min-width: 0;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(128,128,128,.09);
  border-left: 4px solid rgba(128,128,128,.4);
  animation: card-in .5s var(--ease-out) backwards;
}
.fusion-kpi-value { font-size: 24px; font-weight: 700; line-height: 1.15; }
.fusion-kpi-label { font-size: 12px; opacity: .75; margin-top: 4px; }
.fusion-kpi-sub { font-size: 12px; margin-top: 6px; font-weight: 600; overflow-wrap: anywhere; }
.fusion-kpi-verdict { flex-basis: 260px; }
.fusion-verdict-merge { border-left-color: #3c9a5f; background: rgba(60,154,95,.14); }
.fusion-verdict-partial { border-left-color: #e0a030; background: rgba(224,160,48,.14); }
.fusion-verdict-separate { border-left-color: #8a948f; }
.fusion-kpi-union { flex-basis: 100%; font-size: 12px; opacity: .75; }
.fusion-empty { padding: 12px; opacity: .8; }

.fusion-grid { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.fusion-panel { flex: 1 1 280px; min-width: 0; }
.fusion-panel-wide { flex: 2 1 460px; }

.fusion-row { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.fusion-row-label { flex: 0 0 64px; font-size: 12px; font-weight: 600; text-align: right; overflow: hidden; text-overflow: ellipsis; }
.fusion-strip { flex: 1 1 0; min-width: 0; display: grid; gap: 1px; height: 22px; border-radius: 4px; overflow: hidden; }
.fusion-cell { display: block; min-width: 0; transition: transform .15s var(--ease-out); }
.fusion-strip .fusion-cell:hover { transform: scaleY(1.35); }
.fusion-diff-0 { background: rgba(128,128,128,.14); }
.fusion-diff-1 { background: #f0b45c; }
.fusion-diff-2 { background: #c0392b; }
.fusion-axis { display: flex; justify-content: space-between; margin: 4px 0 0 72px; font-size: 11px; opacity: .7; }
.fusion-diff-legend { margin: 8px 0 0 72px; font-size: 11px; opacity: .8; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.fusion-sw { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }

.fusion-matrix { border-collapse: separate; border-spacing: 3px; width: 100%; max-width: 360px; font-size: 13px; }
.fusion-matrix th { font-weight: 600; text-align: center; padding: 4px 6px; white-space: nowrap; }
.fusion-matrix td {
  text-align: center;
  padding: 8px 4px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--accent-fire) calc(var(--p, 0) * 1%), rgba(128,128,128,.08));
  font-variant-numeric: tabular-nums;
}
.fusion-matrix td.fusion-diag { outline: 2px solid rgba(60,154,95,.65); outline-offset: -2px; }
.fusion-lvl { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; vertical-align: middle; border: 1px solid rgba(0,0,0,.2); }

@media (max-width: 600px) {
  .fusion-row-label { flex-basis: 44px; }
  .fusion-axis, .fusion-diff-legend { margin-left: 52px; }
}