/* ============ 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; }

/* ============ Swipe ============ */
#divider{
  position:absolute; top:0; bottom:0; left:50%;
  width:28px; transform:translateX(-50%);
  z-index:10010; cursor:col-resize; touch-action:none; background:transparent;
}
#divider::before{
  content:""; position:absolute; top:0; bottom:0; left:50%; width:2px;
  transform:translateX(-1px);
  background:#fff; box-shadow:0 0 0 1px rgba(0,0,0,.35), 0 0 12px rgba(0,0,0,.28);
  pointer-events:none;
}
#handle{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:48px; height:48px; border-radius:50%;
  background:radial-gradient(120% 120% at 30% 30%, #66b1ff, #2b6be9);
  border:3px solid #fff; z-index:10011;
  box-shadow:0 6px 18px rgba(0,0,0,.25), inset 0 0 0 2px rgba(0,0,0,.15);
  cursor:col-resize; touch-action:none; user-select:none;
}
#handle::before,#handle::after{
  content:""; position:absolute; top:50%; transform:translateY(-50%);
  width:0; height:0; border-top:8px solid transparent; border-bottom:8px solid transparent;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.2));
}
#handle::before{ left:12px;  border-right:12px solid #fff; }
#handle::after { right:12px; border-left:12px solid #fff; }

@media (max-width:640px){
  #handle{ width:56px; height:56px; }
}

/* ============ 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;
}

/* ============ Topbar Ortho ============ */
.topbar{
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 10025; /* status=10030, panel=10020, swipe=10010/11 */
  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: 70px;               /* juste sous la topbar Ortho */
  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 */
#panel{ position:absolute; left:12px; top:190px; 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: 118px;          /* sous la flowbar (70px) */
  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: 230px; }   /* avant tu avais 120px */

/* ================================================================================= MNC compact : overrides minimalistes === */
.mncbar{
  font-size: 12px;      /* taille globale plus petite */
  padding: 4px 8px;
  gap: 6px;
}
.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 */
}

/* Barre de swipe : plus facile à attraper sur mobile */
#handle { touch-action: none; }

/* 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 */