:root { --knpt-green: #018752; --sep-px: 1px; --sep-color: rgba(0,0,0,0.25); --sep-gap: 5px; --strip-map-gap: 8px; --ui-scale: 1; }

/* Modale Partage: layout en colonne, zéro gap, responsive */
#btp-share-modal .sheet main {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  flex-wrap: nowrap;
  gap: 0;
}

/* Améliorations UI modale Partage: hauteur fixe et scroll contenu */
#btp-share-modal .sheet { height: min(700px, 95svh); max-height: 95svh; display: flex; flex-direction: column; }
#btp-share-modal .sheet header { padding: 12px 16px; border-bottom: 1px solid rgba(0,0,0,0.08); }
#btp-share-modal .sheet main { flex: 1 1 auto; min-height: 0; overflow: hidden; padding: 12px 16px; gap: 12px; }
#btp-share-modal .btns { padding: 12px 16px; border-top: 1px solid rgba(0,0,0,0.08); }

/* Zone imprimable: forcer les gaps à 0 dans la strip */
#btp-printable-area .strip {
  display: flex;
  flex-wrap: wrap; /* demandé: permettre retour à la ligne */
  gap: 0;
}

/* Badges (alignement avec l’aperçu/print) */
#btp-printable-area .knpt-badge,
#btp-inline-print-host .knpt-badge { width: calc(24px * var(--ui-scale)); height: calc(24px * var(--ui-scale)); }
#btp-printable-area .knpt-badge > span,
#btp-inline-print-host .knpt-badge > span { font-size: calc(15px * var(--ui-scale)); }
.knpt-badge.digits-3 > span { font-size: calc(11px * var(--ui-scale)) !important; }
.knpt-badge.digits-4plus > span { font-size: calc(8px * var(--ui-scale)) !important; }

/* Badges (alignement avec l’aperçu/print) pour le conteneur d’impression inline */
#btp-inline-print-host .knpt-badge {
  width: calc(24px * var(--ui-scale)); height: calc(24px * var(--ui-scale));
  border-radius: 9999px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0; margin: 0;
  background: var(--knpt-green);
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.25);
}
#btp-inline-print-host .knpt-badge > span {
  color: #fff; font-weight: 700; line-height: 1;
  font-size: calc(15px * var(--ui-scale));
}

/* Ajustements dynamiques via classes */
.knpt-badge.digits-3 > span { font-size: calc(11px * var(--ui-scale)) !important; }
.knpt-badge.digits-4plus > span { font-size: calc(8px * var(--ui-scale)) !important; }

/* Labels de segment: 10 pt, chiffres tabulaires, zéro gap */
#btp-printable-area .seg-label,
#btp-inline-print-host .seg-label { font-size: calc(10pt * var(--ui-scale)); }
#btp-printable-area .seg-label {
  /* évite d’écraser font-size: utiliser propriétés séparées */
  font-family: system-ui, sans-serif;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  text-align: center;
  padding: 0; margin: 0;
}
#btp-printable-area .seg-label strong{ font-weight:800; }

/* Labels de segment: 10 pt, chiffres tabulaires, zéro gap pour le conteneur d’impression inline */
#btp-inline-print-host .seg-label {
  /* évite d’écraser font-size: utiliser propriétés séparées */
  font-family: system-ui, sans-serif;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  text-align: center;
  padding: 0; margin: 0;
}
#btp-inline-print-host .seg-label strong{ font-weight:800; }

/* Duo [badge+label] pour pouvoir insérer des séparateurs entre duos */
#btp-printable-area .knpt-duo { display: inline-flex; align-items: center; gap: 0; }
#btp-inline-print-host .knpt-duo { display: inline-flex; align-items: center; gap: 0; }

/* Séparateurs verticaux entre duos */
#btp-printable-area .duo-sep { width: var(--sep-px); background: var(--sep-color); align-self: stretch; margin-right: var(--sep-gap); }
#btp-inline-print-host .duo-sep { width: var(--sep-px); background: var(--sep-color); align-self: stretch; margin-right: var(--sep-gap); }

/* Séparateurs horizontaux entre lignes de duos */
#btp-printable-area .row-sep { height: var(--sep-px); background: var(--sep-color); width: calc(var(--frame-width) - var(--sep-gap)); align-self: flex-start; }
#btp-inline-print-host .row-sep { height: var(--sep-px); background: var(--sep-color); width: calc(var(--frame-width) - var(--sep-gap)); align-self: flex-start; }

/* Lignes: densifiées */
#btp-printable-area .knpt-row {
  display: flex; align-items: stretch; gap: 0; margin: 0;
}

/* Lignes: densifiées pour le conteneur d’impression inline */
#btp-inline-print-host .knpt-row {
  display: flex; align-items: stretch; gap: 0; margin: 0;
}

/* Variables utilisées pour largeur cadre/labels */
#btp-printable-area { --frame-width: 5cm; --label-width-px: 80px; }
#btp-printable-area { width: var(--frame-width); max-width: var(--frame-width); }
#btp-printable-area .seg-label { width: var(--label-width-px); min-height: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; text-overflow: clip; }
#btp-printable-area .knpt-row { width: 100%; }

/* Appliquer les mêmes largeurs/behaviours à l’hôte d’impression inline */
#btp-inline-print-host { --frame-width: 5cm; --label-width-px: 80px; }
#btp-inline-print-host .seg-label { width: var(--label-width-px); min-height: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; text-overflow: clip; }
#btp-inline-print-host .knpt-row { width: 100%; }
#btp-inline-print-host .strip { display: flex; flex-wrap: wrap; gap: 0; }

/* Mise en page de la zone d’aperçu: permettre à la carte d’être à droite (ou dessous) du cadre */
#btp-printable-area { width: auto; max-width: none; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0; }
#btp-knpt-strip { width: var(--frame-width); max-width: var(--frame-width); flex: 0 0 var(--frame-width); }
#btp-strip-map { margin-top: 0 !important; flex: 1 1 240px; min-width: 240px; margin-left: var(--strip-map-gap); }

/* Carte de prévisualisation: occuper toute la place disponible */
#btp-strip-map { display: flex; align-items: stretch; align-self: stretch; min-height: 240px; }
#btp-strip-map .share-minimap { flex: 1 1 auto; height: 100%; min-height: 240px; }
/* garde la règle générique, mais l’override ci-dessus prime dans la modale */
/* .share-minimap { width: 100%; height: 200px; } */

/* Mini-carte dans la modale de partage */
.share-minimap { width: 100%; height: 200px; }

/* Boutons de la modale */
#btp-share-modal .btns { display: flex; gap: 8px; justify-content: flex-end; }

/* Hôte d’impression inline et wrap A4 */
#btp-inline-print-host { position: fixed; left: -10000px; top: 0; width: 210mm; height: 297mm; background: #fff; display: block; }
#btp-print-wrap { display: flex; gap: 0; padding: 6mm; box-sizing: border-box; width: 210mm; height: 297mm; }
#btp-print-wrap.with-map #btp-print-left { width: var(--frame-width); }
#btp-print-left { box-sizing: border-box; width: var(--frame-width); }
#btp-print-right { flex: 1; height: calc(297mm - 12mm); box-sizing: border-box; display: block; position: relative; overflow: hidden; }
#btp-print-map { position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; transform: translate(-50%, -50%); transform-origin: center; }
#btp-print-map.rotate-90 { transform: translate(-50%, -50%) rotate(90deg); }

/* Styles des pins numérotés sur la carte (aperçu + impression) */
.btp-knpt-pin {
  width: calc(24px * var(--ui-scale));
  height: calc(24px * var(--ui-scale));
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--knpt-green);
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.25);
}
.btp-knpt-pin > span {
  font-size: calc(15px * var(--ui-scale));
  color: #fff;
  font-weight: 700;
  line-height: 1;
}
.btp-knpt-pin.digits-3 > span { font-size: calc(12px * var(--ui-scale)); }
.btp-knpt-pin.digits-4plus > span { font-size: calc(11px * var(--ui-scale)); }

/* Impression: garantir couleurs de fond et configurer la page */
@page { size: A4 portrait; margin: 6mm; }
@media print {
  html, body { margin: 0; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  /* Corrige la règle de panels.css (visibility:hidden) => force visible pour l’hôte d’impression */
  #btp-inline-print-host, #btp-inline-print-host * { visibility: visible !important; }
  body > *:not(#btp-inline-print-host) { display: none !important; }
  #btp-inline-print-host { display: block !important; position: static !important; left: auto !important; width: auto !important; height: auto !important; background: #fff !important; }
  .leaflet-control-container { display: block !important; }
}

/* Wrapper la strip dans la modale */
#btp-share-modal .strip { display: flex; flex-wrap: wrap; gap: 0; }

/* Ne pas casser l’empilement des lignes quand le parent .strip est en flex-wrap */
#btp-share-modal .strip .knpt-row { width: 100%; }

/* Classe utilitaire pour le message vide */
.muted { color: var(--muted, #6b7280); }

/* Échelle Leaflet visible en impression et aperçu */
.leaflet-control-scale { background: rgba(255,255,255,0.9); border: 1px solid rgba(0,0,0,0.2); border-radius: 4px; box-shadow: 0 1px 4px rgba(0,0,0,0.15); }
.leaflet-control-scale-line { background: transparent; border: 2px solid #000; border-top: none; color: #000; font: 10px/1.2 system-ui,sans-serif; padding: 2px 6px; }

/* Rendre seulement la zone d’aperçu scrollable par défaut */
#btp-printable-area.print-zone { flex: 1 1 auto; min-height: 0; overflow: auto; border: 1px solid rgba(0,0,0,0.06); border-radius: 8px; padding: 8px; background: #fff; }

/* Sur tout petit écran, autoriser le scroll global si nécessaire */
@media (max-height: 520px) {
  #btp-share-modal .sheet main { overflow: auto; }
}