/* ============ Base ============ */
html, body { height:100%; margin:0; font-family:system-ui, Arial, sans-serif; }
*, *::before, *::after { box-sizing:border-box; }
#map { position:absolute; inset:0; }
#map canvas { image-rendering:pixelated; image-rendering:crisp-edges; user-select:none; -webkit-user-select:none; }

/* ============ Status ============ */
.status{
  position:absolute; top:10px; right:10px; z-index:10030;
  background:rgba(0,0,0,.6); color:#fff; padding:6px 10px;
  border-radius:8px; font-size:12px; pointer-events:none;
}

/* ============ Toggle de mode + Version ============ */
.view-toggle{
  position: fixed;
  bottom: 16px;
  right: 56px;
  z-index: 10035;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 999px;
  box-shadow: 0 4px 10px rgba(0,0,0,.08);
  backdrop-filter: blur(6px);
}
.view-toggle__label{
  font-weight: 600;
  color: #222;
  font-size: 12px;
}
.view-toggle__value{
  font-weight: 700;
  font-size: 12px;
  color: #0b3d91;
  min-width: 32px;
  text-align: right;
}
.switch{
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}
.switch input{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.switch__track{
  width: 38px;
  height: 20px;
  background: #d6dbe4;
  border-radius: 999px;
  transition: background .2s ease;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.12);
}
.switch__thumb{
  position: absolute;
  left: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.2);
  transition: transform .2s ease;
}
.switch input:checked + .switch__track{
  background: #2b6be9;
}
.switch input:checked + .switch__track + .switch__thumb{
  transform: translate(16px, -50%);
}
.switch input:focus-visible + .switch__track{
  outline: 2px solid #2b6be9;
  outline-offset: 2px;
}
.app-version{
  position: absolute;
  top: 52px;
  right: 18px;
  z-index: 10034;
  font-size: 12px;
  font-weight: 600;
  color: rgba(0,0,0,.6);
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 999px;
  padding: 3px 8px;
  box-shadow: 0 3px 10px rgba(0,0,0,.08);
  backdrop-filter: blur(8px);
}

/* ============ Sélecteurs Ferme/Site/Champ ============ */
#farmSelectors{
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 10025;
}

/* ============ VM: conteneur colonne à gauche ============ */
.vm-sidebar{
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 10026;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: min(820px, calc(100vw - 24px));
}

/* ============ VM: sélecteurs modernisés ============ */
body.mode-vm #farmSelectors{
  position: relative;
  top: auto;
  left: auto;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  box-shadow: 0 10px 26px rgba(0,0,0,.14);
  backdrop-filter: blur(10px);
}
.vm-selectors__brand{
  font-weight: 700;
  font-size: 14px;
  color: #111;
  padding: 6px 10px;
  background: rgba(43,107,233,.08);
  border-radius: 10px;
}
.vm-selectors__field{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: #2f2f2f;
}
.vm-selectors__select{
  min-width: 190px;
  padding: 8px 10px;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 10px;
  background: #fff;
  font-weight: 600;
  color: #1f1f1f;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.06);
}
.vm-selectors__select:focus-visible{
  outline: 2px solid #2b6be9;
  outline-offset: 2px;
}
.vm-selectors__toggles{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  background: rgba(15, 23, 42, 0.06);
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.06);
}
.vm-toggle{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: rgba(0,0,0,.65);
  cursor: pointer;
}
.vm-toggle input{
  accent-color: #0b3d91;
}

/* ============ VM: registre des données ============ */
.data-register{
  position: relative;
  width: 100%;
  background: rgba(255,255,255,.97);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 16px;
  box-shadow: 0 12px 30px rgba(0,0,0,.12);
  padding: 12px;
  backdrop-filter: blur(10px);
}
.data-register__header{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.data-register__title{
  font-weight: 800;
  font-size: 13px;
  color: #1d1d1d;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.data-register__controls{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px;
  background: rgba(15, 23, 42, 0.06);
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.06);
}
.data-register__chip{
  all: unset;
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  color: rgba(0,0,0,.6);
  transition: background .2s ease, color .2s ease;
}
.data-register__chip.is-active{
  background: #0b3d91;
  color: #fff;
  box-shadow: 0 4px 10px rgba(11,61,145,.22);
}
.data-register__hint{
  font-size: 12px;
  font-weight: 600;
  color: rgba(0,0,0,.55);
}
.data-register__columns{
  display: grid;
  grid-template-columns: repeat(2, minmax(210px, 1fr));
  gap: 12px;
  transition: grid-template-columns .2s ease;
}
.data-register__quick-actions{
  display: inline-flex;
  gap: 6px;
}
.action-chip{
  border: 1px solid rgba(0,0,0,.08);
  background: #fff;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 700;
  color: #111;
  cursor: pointer;
}
.action-chip--soft{
  background: rgba(11,61,145,.08);
  color: #0b3d91;
  border-color: rgba(11,61,145,.16);
}
.action-chip:focus-visible{
  outline: 2px solid #2b6be9;
  outline-offset: 2px;
}

.data-register__analysis-section{
  margin-top: 12px;
  padding: 12px;
  background: linear-gradient(145deg, rgba(11,61,145,.08), rgba(11,61,145,.02));
  border: 1px solid rgba(11,61,145,.18);
  border-radius: 16px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.7);
}
.data-register__analysis-section .data-register__quick-actions{
  margin-top: 10px;
}
.data-register__analysis-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
.data-register__analysis-title{
  font-size: 12px;
  font-weight: 800;
  color: #0b3d91;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.analysis-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}
.analysis-card{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  background: #fff;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 6px 14px rgba(0,0,0,.08);
}
.analysis-card__icon{
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: rgba(11,61,145,.1);
  color: #0b3d91;
  font-weight: 800;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.analysis-card__label{
  font-weight: 700;
  font-size: 13px;
  color: #1f2a44;
}
.analysis-card.is-empty{
  background: rgba(255,255,255,.7);
  color: rgba(0,0,0,.45);
  box-shadow: none;
  justify-content: center;
}

.side-panel{
  position: fixed;
  top: 90px;
  right: 16px;
  width: min(360px, 92vw);
  max-height: calc(100vh - 120px);
  z-index: 10060;
  background: rgba(255,255,255,.98);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 16px;
  box-shadow: 0 14px 30px rgba(0,0,0,.18);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.side-panel.hidden{
  display: none;
}
.side-panel__header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(0,0,0,.08);
}
.side-panel__title{
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.side-panel__close{
  border: none;
  background: rgba(0,0,0,.06);
  border-radius: 8px;
  padding: 2px 8px;
  font-size: 16px;
  cursor: pointer;
}
.side-panel__body{
  padding: 12px;
  font-size: 13px;
  color: #222;
  overflow: auto;
}
.data-register__column{
  background: rgba(248,249,252,.9);
  border-radius: 12px;
  padding: 10px;
  min-height: 140px;
  border: 1px solid rgba(0,0,0,.06);
}
.data-register__column-title{
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 700;
  font-size: 12px;
  color: rgba(0,0,0,.7);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 8px;
}
.data-register__column-title--items{
  gap: 8px;
  flex-wrap: wrap;
}
.data-register__list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.data-register__item{
  padding: 8px 10px;
  background: rgba(43,107,233,.08);
  border-radius: 10px;
  font-weight: 600;
  color: #102a69;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.data-register__item-count{
  font-size: 11px;
  font-weight: 700;
  color: rgba(11,61,145,.8);
  background: rgba(43,107,233,.15);
  padding: 2px 6px;
  border-radius: 999px;
}
.data-register__item button{
  all: unset;
  cursor: pointer;
  width: 100%;
}
.data-register__item.is-active{
  background: rgba(43,107,233,.18);
  box-shadow: inset 0 0 0 1px rgba(43,107,233,.25);
}
.data-register__item.is-dragging{
  opacity: .6;
  transform: scale(0.98);
}
.data-register__item.drag-over{
  background: rgba(43,107,233,.24);
  box-shadow: inset 0 0 0 2px rgba(43,107,233,.35);
}
.data-register__item.is-empty{
  background: rgba(0,0,0,.04);
  color: rgba(0,0,0,.5);
  font-weight: 600;
}
.layer-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
}
.layer-label{
  font-weight: 700;
  color: #162a5c;
  font-size: 12px;
}
.layer-handle{
  cursor: grab;
  font-weight: 800;
  color: rgba(0,0,0,.45);
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(0,0,0,.05);
}
.layer-handle:active{
  cursor: grabbing;
}
.layer-actions{
  display: inline-flex;
  gap: 6px;
}
.layer-btn{
  border: 1px solid rgba(0,0,0,.15);
  background: #fff;
  border-radius: 8px;
  padding: 2px 6px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.layer-btn:disabled{
  opacity: .4;
  cursor: not-allowed;
}
.layer-opacity{
  width: 100%;
  margin-top: 6px;
}

/* Remonter le dock rendement quand la sidebar est large */
body.mode-vm #yieldDock{
  left: auto !important;
  right: 16px !important;
  z-index: 10040;
}
.data-register__column--layers{
  grid-column: span 1;
}
body.mode-vm .data-register__columns.has-layers{
  grid-template-columns: repeat(3, minmax(210px, 1fr));
}
body.mode-vm .data-register__columns.cols-1{
  grid-template-columns: 1fr;
}
body.mode-vm .data-register__columns.cols-2{
  grid-template-columns: repeat(2, minmax(210px, 1fr));
}
body.mode-vm .data-register__columns.cols-3{
  grid-template-columns: repeat(3, minmax(210px, 1fr));
}
body.mode-vm .data-register__column.is-hidden{
  display: none;
}
body:not(.mode-vm) .vm-sidebar{
  display: none;
}

@media (max-width: 980px){
  .data-register__columns,
  body.mode-vm .data-register__columns.has-layers{
    grid-template-columns: 1fr;
  }
}

/* ============ VM: masquer les panneaux détaillés ============ */
body.mode-vm #panel,
body.mode-vm #orthoBar,
body.mode-vm .flowbar,
body.mode-vm .mncbar,
body.mode-vm .yieldbar,
body.mode-vm #yieldLegend,
body.mode-vm #yieldChartsDock,
body.mode-vm #mncDock{
  display: none !important;
}

/* ============ Barre Ortho RGB (avec collapse) ============ */
.orthobar{
  position: absolute;
  left: 12px;
  top: 70px;               /* juste sous farmSelectors */
  z-index: 10025;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px 10px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
  user-select: none;
  min-width: 200px;
}

#orthoToggle{
  cursor: pointer;
  border: 1px solid rgba(0,0,0,.35);
  background: rgba(255,255,255,.95);
  border-radius: 10px;
  padding: 6px 10px;
  font-weight: 700;
  font-size: 14px;
  font-family: inherit;
  width: 100%;
  text-align: left;
}

#orthoToggle:focus-visible{
  outline: 2px solid #2b6be9;
  outline-offset: 2px;
}

.ortho-body{
  margin-top: 0;
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 8px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.orthobar.collapsed .ortho-body{
  display: none;
}

.orthobar.collapsed #orthoToggle::after{
  content: " ▸";
}

.orthobar:not(.collapsed) #orthoToggle::after{
  content: " ▾";
}

/* ============ Topbar (ancien style, gardé pour compatibilité) ============ */
.topbar{
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 10025;
  display: flex;
  gap: 8px;
  padding: 6px 10px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
  user-select: none;
}

/* ============ Barre Écoulement (simple, sous Ortho) ============ */
.flowbar{
  position: absolute;
  left: 12px;
  top: 140px;              /* ajusté pour être sous orthoBar */
  z-index: 10025;
  display: flex;
  gap: 8px;
  padding: 6px 10px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
  user-select: none;
}
/* Donne au texte des rubriques Ortho + Écoulement le même look que #panelToggle */
.topbar label,
.flowbar label{
  font-weight: 700;                       /* comme #panelToggle */
  border: 1px solid rgba(0,0,0,.35);      /* idem */
  background: rgba(255,255,255,.95);      /* idem */
  border-radius: 10px;                    /* idem */
  padding: 6px 10px;                      /* idem */
  display: inline-flex;                   /* joli alignement checkbox + texte */
  align-items: center;
  gap: 8px;
  user-select: none;
}

/* même focus que les autres boutons */
.topbar label:focus-within,
.flowbar label:focus-within{
  outline: 2px solid #2b6be9;
  outline-offset: 2px;
}

/* (optionnel) homogénéiser la taille du texte */
.topbar label,
.flowbar label,
#panelToggle{
  font-size: 14px;
  font-family: inherit; /* déjà system-ui chez toi */
}


/* ============ Panel principal (NDVI + Rendement) ============ */
/* Descend le panel pour ne pas chevaucher le bloc flow et ortho */
#panel{ position:absolute; left:12px; top:220px; z-index:10020; }
button { font-family:inherit; -webkit-appearance:none; appearance:none; }
#panelToggle{
  cursor:pointer; border:1px solid rgba(0,0,0,.35);
  background:rgba(255,255,255,.95);
  border-radius:10px; padding:6px 10px; font-weight:700;
}

/* Corps scrollable */
#panelBody{
  margin-top:8px; background:rgba(255,255,255,.92);
  border:1px solid rgba(0,0,0,.10); border-radius:10px;
  padding:8px; min-width:260px; box-shadow:0 6px 18px rgba(0,0,0,.15);
  display:flex; flex-direction:column; gap:8px;
  max-height: calc(100vh - 210px); /* tient compte du flow + topbar */
  overflow:auto;
}
#panel.collapsed #panelBody{ display:none; }

/* Blocs internes */
.block{ margin:0; } /* on utilise le gap du conteneur */
.row{ display:flex; align-items:center; gap:8px; margin:6px 0; }

/* Player */
#controls{ display:flex; align-items:center; gap:8px; }
#btnPlay{ padding:6px 10px; font-weight:700; cursor:pointer; }
#frame{ flex:1; width:100%; }
#dateLabel{ min-width:110px; text-align:right; font-weight:600; }

/* ============ Sections pliables ============ */
#legendToggle, #profileToggle, #yieldToggle{
  width:100%; text-align:left; cursor:pointer;
  border:1px solid rgba(0,0,0,.25);
  background:rgba(255,255,255,.9);
  border-radius:8px; padding:4px 8px; font-size:16px; font-weight:700;
}
#legendBody, #profileBody, #yieldBody{
  margin-top:6px; background:rgba(255,255,255,.9);
  border:1px solid rgba(0,0,0,.10); border-radius:8px; padding:6px;
}
#legend.collapsed #legendBody{ display:none; }
#profile.collapsed #profileBody{ display:none; }
#yieldPanel.collapsed #yieldBody{ display:none; }

/* ============ Ordre dans le panel ============ */
/* NDVI en haut (player + profil + légende), Rendement tout en bas */
#yieldPanel { order: 999; }   /* Rendement sous le NDVI */

/* ============ Légende NDVI ============ */
.legend-bar{
  height:8px; border-radius:4px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.18);
  background:linear-gradient(to right, #7f4f24, #f0e68c, #7ec850, #0b7d26);
}
.legend-scale{
  margin-top:2px; display:flex; justify-content:space-between;
  font-size:11px; font-weight:700; color:#000;
}

/* ============ Profil NDVI ============ */
#tsChart{
  display:block; width:100%;
  height:140px;
}
.hint{ margin-top:4px; font-size:11px; color:#333; }

/* ============ Étiquette Culture (plus visible) ============ */
/* Étiquette Culture bien visible */
#yieldCropLabel{
  font-size: 20px !important;
  line-height: 1.05;
  font-weight: 800 !important;   /* 700–900 valides */
  color: #0057B7;
  display: block;                 /* prend toute la ligne */
  margin-top: 2px;
}



/* ============ Tooltip NDVI ============ */
#ndviTip{
  background:rgba(0,0,0,.78); color:#fff; padding:4px 6px;
  border-radius:6px; font-size:12px; line-height:1;
  pointer-events:none; white-space:nowrap; z-index:10040;
}

/* ============ Focus (accessibilité) ============ */
#panelToggle:focus-visible,
#legendToggle:focus-visible,
#profileToggle:focus-visible,
#yieldToggle:focus-visible,
#flowToggle:focus-visible,
#btnPlay:focus-visible,
#frame:focus-visible,
#speedSel:focus-visible,
#btnFitOrtho:focus-visible{
  outline:2px solid #2b6be9; outline-offset:2px;
}

/* ============ Petits écrans ============ */
@media (max-width: 720px){
  #panelBody{ max-height: calc(100vh - 230px); }
}

/* ====== Légende Rendement (raster & polygone) ====== */
#yieldLegend{
  position:absolute;
  left:12px;
  bottom:12px;
  z-index:10026;
  background:rgba(255,255,255,.95);
  border:1px solid rgba(0,0,0,.12);
  border-radius:10px;
  box-shadow:0 6px 18px rgba(0,0,0,.15);
  padding:8px 10px;
  min-width:220px;
  font-size:13px;
}
#yieldLegend.hidden{ display:none; }
#yieldLegend .title{
  font-weight:800;
  margin-bottom:6px;
}
#yieldLegend .item{
  display:flex; align-items:center; gap:8px;
  margin:4px 0;
}
#yieldLegend .swatch{
  width:18px; height:12px; border-radius:3px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.2);
}
#yieldLegend .label{ font-weight:700; }
#yieldLegend .value{ margin-left:auto; opacity:.85; }


/* pie chart avec histogramme RDT*/
#yieldChartsDock{
  position:absolute;
  right:16px;       /* ➜ ancré à DROITE */
  left:auto;        /* ➜ s’assure qu’on n’est PAS à gauche */
  bottom:18px;
  z-index:35;
  background:#fff;
  border:1px solid rgba(0,0,0,.12);
  border-radius:12px;
  box-shadow:0 4px 14px rgba(0,0,0,.12);
  padding:10px 12px;
  max-width: 660px;
}
#yieldChartsDock.hidden{ display:none; }
#yieldChartsDock .dock-title{ font:600 13px/1.2 system-ui, Arial; margin-bottom:8px; }
#yieldChartsDock .dock-body{ display:flex; gap:12px; align-items:flex-start; flex-wrap:wrap; }
#yieldChartsDock .dock-item{ display:flex; flex-direction:column; }
#yieldChartsDock .dock-caption{ font:500 12px/1.2 system-ui, Arial; margin-bottom:4px; }
#yieldPie, #yieldHist{ border:1px solid rgba(0,0,0,.08); border-radius:10px; background:#fff; display:block; }


/*  */
/* ====== Dock des graphiques (pie + histogramme) ====== */
#yieldChartsDock{
  position: absolute;
  right: 16px;
  bottom: 18px;
  z-index: 35;
  background: #fff;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(0,0,0,.12);
  padding: 10px 12px;
  max-width: 660px;
}
#yieldChartsDock.hidden{ display:none; }

.charts-dock-title{
  font: 600 13px/1.2 system-ui, Arial;
  margin-bottom: 8px;
}
.charts-dock-body{
  display: flex;
  gap: 24px;
  align-items: flex-start;
  flex-wrap: wrap;
}
/* Petit réglage fin (optionnel) : décale un peu vers la gauche */
#yieldPie{
  margin-left: -8px;       /* ajuste la valeur (ex: -4px, -12px…) */
}
/* items */
.charts-item{ display:flex; flex-direction:column; }
.charts-item--pie  { align-items:center; }
.charts-item--hist { min-width: 420px; }

/* captions */
.charts-caption{
  font: 500 12px/1.2 system-ui, Arial;
  margin-bottom: 6px;
}

/* canvases */
.chart-pie,
.chart-hist{
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 10px;
  background: #fff;
  display: block;
}

/* === Légende du pie === */
.pie-legend{
  margin-top: 8px;
  display: flex;
  gap: 16px;
  font: 500 12px/1.2 system-ui, Arial;
}
.pie-legend-item{
  display: inline-flex;
  align-items: flex-start;  /* au lieu de center */
  gap: 6px;
}
.pie-legend-val{ font-weight: 700; }

/* pastilles couleur */
.swatch{
  width: 12px;
  height: 12px;
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.2);
}
.swatch--red   { background: #d73027; }
.swatch--green { background: #006400; }

/* responsive */
@media (max-width: 700px){
  .charts-dock-body{ gap: 14px; }
  .pie-legend{ flex-direction: column; gap: 6px; }
}

/* ====== Paramètres esthétiques pilotables (CSS vars) ====== */
:root{
  /* Décalage des labels au-dessus des barres */
  --hist-value-offset: 18px;  /* hauteur du libellé valeur (ac) */
  --hist-pct-offset:   6px;   /* hauteur du libellé % */
  /* dimensions visuelles (tu peux jouer ici) */
  --pie-size: 220px;   /* si tu veux le pie plus petit/grand */
  --hist-width: 480px; /* largeur histo (canvas width déjà 480) */
}
.chart-pie { width: var(--pie-size); height: var(--pie-size); }
.chart-hist{ width: var(--hist-width); }

/* décale seulement le canvas du pie vers la gauche */
#yieldPie{
  margin-left: -8px;   /* ajuste -4, -6, -10 selon ton goût */
  display: block;      /* sûr qu’il prend bien le marging */
}

/*---------------------------------------------------- MNC */
/* à mettre dans ton CSS global */

.mncbar, .flowbar{
  display:flex; align-items:center; gap:8px;
  padding:6px 10px; margin:6px 12px 0; 
  background:rgba(255,255,255,.92); border:1px solid #ddd; border-radius:10px;
  box-shadow:0 2px 10px rgba(0,0,0,.06);
}
.mncbar label{ display:inline-flex; align-items:center; gap:6px; }
.mncbar select, .mncbar button{ padding:4px 8px; border-radius:8px; border:1px solid #ccc; background:#fff; }
.mncbar button{ cursor:pointer; }

/* ----------------------------------------- barre MNC : même positionnement que la flowbar --- */
.mncbar{
  position: absolute;
  left: 12px;
  top: 200px;          /* ajusté pour être sous flowbar (140px) */
  z-index: 10025;      /* au-dessus de la carte */
  display: flex;
  gap: 8px;
  padding: 6px 10px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
  user-select: none;
}

/* homogénéise le look du label comme Ortho/Écoulement */
.mncbar label{
  font-weight: 700;
  border: 1px solid rgba(0,0,0,.35);
  background: rgba(255,255,255,.95);
  border-radius: 10px;
  padding: 6px 10px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}



/* En-tête (ligne courte) */
.mnc-head{ display:flex; align-items:center; gap:8px; }
.mnc-check{ /* le gros label "MNC (Canopée)" */
  font-weight:700; border:1px solid rgba(0,0,0,.35);
  background:rgba(255,255,255,.95);
  border-radius:10px; padding:6px 10px; display:inline-flex; gap:8px;
}

/* Bouton ouvrir/fermer (▸ / ▾) */
#mncToggle{
  margin-left:auto; cursor:pointer;
  border:1px solid rgba(0,0,0,.25);
  background:rgba(255,255,255,.9);
  border-radius:8px; padding:4px 8px; font-weight:500;
}

/* Corps repliable */
.mnc-body{
  margin-top:6px; background:rgba(255,255,255,.9);
  border:1px solid rgba(0,0,0,.10); border-radius:8px; padding:6px;
}
#mncPanel.collapsed .mnc-body{ display:none; }

/* IMPORTANT: à l’intérieur du corps, on enlève le style "pilule" des labels */
.mncbar .mnc-body label{
  border:none; background:transparent; border-radius:0; padding:0;
  font-weight:600; display:inline-flex; align-items:center; gap:6px;
}
.mncbar .mnc-body select,
.mncbar .mnc-body button{
  padding:4px 8px; border-radius:8px; border:1px solid #ccc; background:#fff;
}

/* déplace le panel NDVI  pour ne pas chevaucher la mncbar */
#panel{ top: 280px; }   /* ajusté pour être sous mncbar (200px) */

/* ================================================================================= MNC compact : overrides minimalistes === */
.mncbar{
  font-size: 12px;      /* taille globale plus petite */
  padding: 4px 8px;
  gap: 6px;
  top: 200px !important;  /* s'assurer que la position est correcte */
}
.mncbar .mnc-check{
  font-size: 13px;
  padding: 4px 8px;
  border-radius: 8px;
  font-weight: 700;
}
#mncToggle{
  font-size: 12px;
  padding: 2px 6px;
}

/* corps ouvert : éléments sur 2 lignes si besoin (Date/Vitesse en dessous) */
.mncbar .mnc-body{
  font-size: 12px;
  padding: 6px;
}
.mncbar .mnc-body .row{
  flex-wrap: wrap;      /* permet le retour à la ligne */
  gap: 8px 10px;
}

/* contrôles plus compacts */
.mncbar .mnc-body select,
.mncbar .mnc-body button{
  font-size: 12px;
  height: 28px;
  padding: 2px 8px;
  border-radius: 8px;
}
.mncbar input[type="checkbox"]{
  transform: scale(0.9);
}
.mncbar .yieldBadge{ font-size: 12px; }

/* === Alignement des rubriques à gauche === */
/* Supprime la marge résiduelle et force le même left pour les 3 barres */
.topbar,
.flowbar,
.mncbar{
  left: 12px;
  margin: 0 !important;   /* annule le margin:6px 12px 0 de la règle générique */
}

/* S’assure que le panel est bien sur le même axe */
#panel{
  left: 12px;
}
/* ----responsive */
/* ===== Layout de base des docks ===== */
#mncDock, #yieldChartsDock {
  max-width: min(360px, 92vw);
  right: 18px; 
  z-index: 1000;
}
#yieldChartsDock { bottom: 18px; }

/* Éviter de masquer la carte: faire défiler si le dock est trop haut */
#mncDock, #yieldChartsDock {
  max-height: calc(100vh - 110px);
  overflow: auto;
}

/* Petits écrans : empiler en bas, plein-largeur, sans chevauchement */
@media (max-width: 900px) {
  #mncDock, #yieldChartsDock {
    left: 10px; right: 10px;
    max-width: none;
    width: auto;
  }
  #mncDock   { top: auto; bottom: calc(10px + 56px); } /* au-dessus de l’autre bloc */
  #yieldChartsDock { bottom: 10px; }
}

/* Très petits écrans (hauteur réduite) : compacter la typo */
@media (max-height: 650px) {
  #mncDock { font-size: 11px; }
  #yieldChartsDock { font-size: 11px; }
}

/* Panneau latéral repliable : largeur fluide */
#panel { max-width: min(420px, 94vw); }

/* Légendes : éviter les débordements */
#yieldLegend .item, #mncLegend .row {
  flex-wrap: wrap;
}
#yieldLegend .value, #mncLegend .val {
  white-space: nowrap;
}

/* Canvases : toujours s’adapter à la largeur du conteneur */
canvas {
  max-width: 100%;
  height: auto !important;  /* laisse JS gérer le ratio via devicePixelRatio */
}

/* Ne pas bloquer les interactions de carte quand on scrolle dans un dock superposé */
#mncDock, #yieldChartsDock { -webkit-overflow-scrolling: touch; background: rgba(255,255,255,.96); }

/* Classe utilitaire déjà chez toi, au cas où */
.hidden{ display:none !important; }

/* v2 */
/* --- docks responsives & anti-overlap --- */
#mncDock,
#yieldChartsDock{
  position: fixed;            /* ← au lieu de absolute */
  right: 18px;
  z-index: 1000;
  max-width: min(360px, 94vw);
  max-height: calc(100vh - 120px); /* évite de dépasser l’écran */
  overflow: auto;                     /* scroll interne si trop haut */
  -webkit-overflow-scrolling: touch;
}

/* positions par défaut desktop */
#mncDock{ top: 86px; bottom: auto; }
#yieldChartsDock{ bottom: 18px; }

/* petits écrans : pleine largeur, empilés en bas sans chevauchement */
@media (max-width: 900px){
  #mncDock,
  #yieldChartsDock{
    left: 12px;
    right: 12px;
    max-width: none;
  }
  /* MNC se place automatiquement au-dessus des charts via --charts-h (cf. JS) */
  #yieldChartsDock{ bottom: 12px; }
  #mncDock{ top: auto; bottom: calc(12px + var(--charts-h, 0px) + 12px); }
}
/*  barre rendement sous ndvi */

/* Barre Rendement séparée, alignée avec le panneau NDVI */
.yieldbar{
  position: absolute;           /* on laisse JS fixer top/left/width */
  z-index: 10020;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
  padding: 10px 12px;
  max-width: min(420px, 94vw);  /* même largeur max que #panel */
  top: 800px;        /* ← AJUSTE ICI la hauteur sous le panneau NDVI */
}

/* En-tête + bouton ouvrant/fermant */
.yieldbar .yield-head{ display:flex; align-items:center; gap:8px; }
.yieldbar #yieldToggle{
  margin-left:auto; cursor:pointer;
  border:1px solid rgba(0,0,0,.25);
  background:rgba(255,255,255,.9);
  border-radius:8px; padding:4px 8px; font-weight:500;
}

/* Corps repliable */
.yieldbar .yield-body{
  margin-top:6px; background:rgba(255,255,255,.9);
  border:1px solid rgba(0,0,0,.10);
  border-radius:8px; padding:6px;
}
.yieldbar.collapsed .yield-body{ display:none; }

/* Harmonise le “gros label” comme Ortho/Écoulement */
.yieldbar .yield-head > span{
  font-weight:700; border:1px solid rgba(0,0,0,.35);
  background:rgba(255,255,255,.95);
  border-radius:10px; padding:6px 10px;
}

/* Aligne visuellement les 4 blocs à gauche */
.topbar, .flowbar, .mncbar, #panel, .yieldbar { left: 12px; }

/* (IMPORTANT) Supprime les anciennes règles qui supposaient Rendement DANS le panel */
#yieldPanel { order: initial; }                /* ou supprime carrément cette règle */
#yieldPanel.collapsed #yieldBody { display: initial; } /* non nécessaire avec .yieldbar */