:root {
  --bg: #f7f8fa;
  --panel: #ffffff;
  --text: #1f2937;
  --muted: #6b7280;
  --primary: #2563eb;
  --primary-contrast: #ffffff;
  --line: #e5e7eb;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.45 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* Header */
.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
  position: sticky;
  top: 0;
  z-index: 10;
}

.brand {
  font-weight: 700;
  font-size: 18px;
  display: flex;
  gap: 8px;
  align-items: center;
}

.battery {
  font-size: 20px;
}

.primary {
  background: var(--primary);
  color: var(--primary-contrast);
  border: none;
  border-radius: 10px;
  padding: 10px 14px;
  cursor: pointer;
  font-weight: 600;
}

.primary:hover {
  filter: brightness(0.95);
}

.ghost {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 10px;
  cursor: pointer;
}

/* Controls */
.controls {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto auto auto;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}

.controls .field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.controls .field.small input {
  width: 140px;
}

.controls input {
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

/* Bar d'options d'arrêt */
.stopsbar {
  display: grid;
  grid-template-columns: auto repeat(3, 1fr); /* le titre + 3 colonnes */
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}

.stop-title {
  font-weight: 600;
  font-size: 1.2em;
  color: var(--text);
  white-space: nowrap;
}

.stop-option {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px;
  background: #fff;
  cursor: pointer;
  transition: all 0.2s;
}

.stop-option.active {
  border-color: var(--primary);
  background: #eff6ff;
  box-shadow: 0 0 0 2px #dbeafe;
}

.stop-option .label {
  font-weight: 600;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.stop-option .row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.badge {
  background: #eef2ff;
  color: #3730a3;
  padding: 4px 8px;
  border-radius: 999px;
  font-weight: 700;
}

/* Layout : carte + panneau latéral */
.layout {
  display: grid;
  gap: 14px;
  padding: 14px 16px;
}

.layout-wide-panel {
  grid-template-columns: 40% 60%; /* carte + panneau */
}

#map {
  height: calc(100vh - 280px);
  min-height: 520px;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: #ddd;
}

.leaflet-container img {
  max-width: none !important;
}

.leaflet-tile {
  width: 256px !important;
  height: 256px !important;
}

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: calc(100vh - 280px);
  overflow: auto;
}

.summary .muted {
  color: var(--muted);
}

.table-wrap {
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
}

table {
  width: 100%;
  border-collapse: collapse;
  min-width: 900px;
}

thead th {
  position: sticky;
  top: 0;
  background: var(--primary);
  color: #fff;
  font-weight: 700;
  padding: 8px;
  text-align: center;
}

tbody td {
  padding: 8px;
  border-top: 1px solid var(--line);
  text-align: center;
}

/* Modal paramètres */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.modal.hidden {
  display: none;
}

.modal-content {
  background: #fff;
  width: min(720px, 92vw);
  border-radius: 12px;
  border: 1px solid var(--line);
  padding: 12px 12px 14px;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.modal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}

.modal .field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.modal input,
.modal select {
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

/* Responsive */
@media (max-width: 1100px) {
  .layout-wide-panel {
    grid-template-columns: 1fr;
  }
  #map {
    height: 480px;
  }
  .panel {
    max-height: none;
  }
  .stopsbar {
    grid-template-columns: 1fr;
  }
}

.etape-marker {
  font-size: 20px;
  color: #2563eb; /* bleu primaire */
  text-shadow: 0 0 3px white;
}

.recharge-cell {
  background: #f8fafc;
  border: 1px dashed #9ca3af;
  cursor: pointer;
  transition: all 0.2s ease;
}
.recharge-cell:hover {
  background: #eef2ff;
  border-color: #6366f1;
}
.recharge-cell:focus {
  background: #e0e7ff;
  border-color: #4338ca;
  outline: none;
}
.step-marker {
  font-size: 20px;
  color: #f59e0b;
  text-shadow: 0 0 2px #fff;
}
#settingsModal .field input[type='checkbox'] {
  transform: scale(1.2);
  margin-right: 6px;
}
#settingsModal .field label {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
#routesList {
  position: absolute;
  top: 80px;
  right: 10px;
  width: 260px;
  max-height: 400px;
  overflow-y: auto;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 8px;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
  padding: 10px;
  font-family: Arial, sans-serif;
  z-index: 1000;
}

#routesList .route-item {
  padding: 6px 8px;
  margin: 4px 0;
  border-radius: 4px;
  cursor: pointer;
  background: #f2f2f2;
  transition: background 0.2s;
}

#routesList .route-item:hover {
  background: #e0e7ff;
}

#routesList .route-item.selected {
  background: #dbeafe;
  border: 1px solid #2563eb;
}
.routes-summary {
  width: 100%;
  border-collapse: collapse;
  margin: 10px 0;
  font-size: 0.9rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.routes-summary th,
.routes-summary td {
  border: 1px solid #ccc;
  padding: 6px 10px;
  text-align: center;
}

.routes-summary tr:hover {
  background-color: #eef;
  cursor: pointer;
}

.steps-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
}
.steps-table th,
.steps-table td {
  border: 1px solid #ccc;
  padding: 6px 8px;
  text-align: center;
}
.steps-table th {
  background-color: #2563eb;
  color: white;
}
.steps-table tr:nth-child(even) {
  background-color: #f5f5f5;
}

.soc-green {
  background-color: #d1fae5; /* vert léger */
  color: #065f46;
  font-weight: bold;
}

.soc-orange {
  background-color: #fef3c7; /* orange léger */
  color: #9a3412;
  font-weight: bold;
}

.soc-red {
  background-color: #fee2e2; /* rouge léger */
  color: #b91c1c;
  font-weight: bold;
}

.stop-option .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px; /* optionnel */
}

#distanceRange,
#sliderKm,
#sliderH,
#sliderSOC {
  flex: 1; /* prend toute la place disponible */
  max-width: none !important;
}

/* Conteneur horizontal pour le slider + la valeur */
.searchRadius-row {
  display: flex;
  align-items: center;
  gap: 12px; /* espace entre le slider et "10 km" */
}

/* Le slider prend toute la largeur disponible */
.searchRadius-row input[type='range'] {
  flex: 1;
}

#searchRadius {
  flex: 1; /* prend toute la place disponible */
  max-width: 400px !important;
}

.city-click {
  cursor: pointer;
  color: #2563eb;
  font-weight: 600;
}

.city-click:hover {
  text-decoration: underline;
}

/* Base commune à toutes les bornes */
.ev-marker {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.4);
}

/* BLEU ≤ 22 kW */
.ev-marker-normal i {
  font-size: 18px;
  color: #007bff;
}

/* MAUVE > 22 kW et ≤ 100 kW */
.ev-marker-mid i {
  font-size: 18px;
  color: #9b59b6;
}

/* ROUGE > 100 kW */
.ev-marker-hpc i {
  font-size: 18px;
  color: #e74c3c;
}

.food-marker i {
  font-size: 20px;
  color: #e67e22; /* Orange / restaurant */
  text-shadow: 0 0 3px white;
}

.poi-control button {
  width: 30px;
  height: 30px;
  border: none;
  background: #fff;
  cursor: pointer;
}

.poi-control label {
  background: #fff;
  font-size: 11px;
}

.poi-control {
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.poi-control div:hover,
.poi-control label:hover {
  background: #f3f3f3 !important;
}

.btn-small {
  font-size: 12px;
  padding: 4px 8px;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.btn-small:hover {
  background: #005dc1;
}
#swapBtn {
  font-size: 12px;
  padding: 4px 12px;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

#swapBtn:hover {
  background: #005dc1;
}

.step-end-grey {
  opacity: 0.05;
  background: #f2f2f2;
  pointer-events: none; /* empêche les clics / édition */
}

/* Fond bleuté très léger pour tous les champs de saisie */
input,
select,
textarea {
  background-color: #f3f8ff !important; /* bleu très léger */
  border: 1px solid #bcd0ff;
  padding: 6px;
  border-radius: 4px;
}

/* Survol */
input:hover,
select:hover,
textarea:hover {
  background-color: #e8f1ff !important;
}

/* Focus */
input:focus,
select:focus,
textarea:focus {
  background-color: #ffffff !important;
  border-color: #5a8dff;
  outline: none;
  box-shadow: 0 0 4px rgba(90, 141, 255, 0.4);
}

.last-arrival-highlight {
  background-color: #f4e9ff !important; /* violet pastel */
  font-weight: bold;
  border-radius: 4px;
  padding: 2px 4px;
}

.disabled-recharge-cell {
  background: #eee !important;
  color: #999 !important;
  pointer-events: none;
}

/* ---------------------- TOOLTIP INFO ---------------------- */
.tooltip,
.tooltipShort {
  position: relative;
  display: inline-block;
  margin-left: 6px;
  cursor: pointer;
}

.tooltip::after,
.tooltipShort::after {
  content: 'i';
  background-color: #007bff;
  color: white;
  border-radius: 50%;
  padding: 1px 7px;
  height: 17px;
  font-size: 12px;
  font-weight: bold;
  display: inline-block;
  text-align: center;
}

.tooltip .tooltip-text {
  visibility: hidden;
  width: 730px;
  background-color: black;
  color: white;
  text-align: left;
  border-radius: 6px;
  padding: 5px;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.3s;
  font-size: 13px;
}
.tooltipShort .tooltipShort-text {
  visibility: hidden;
  width: 380px;
  background-color: black;
  color: white;
  text-align: left;
  border-radius: 6px;
  padding: 5px;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.3s;
  font-size: 13px;
}

.tooltip:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
}
.tooltipShort:hover .tooltipShort-text {
  visibility: visible;
  opacity: 1;
}

/* Recharge editable : bleu très léger */
.recharge-cell[contenteditable='true'] {
  background-color: #eef6ff; /* bleu pastel léger */
  border-radius: 4px;
}

/* --- Boîte légende intégrée au contrôle --- */
.ev-legend-box {
  background: #fff;
  padding: 6px 8px;
  border-top: 1px solid #ccc;
  font-size: 12px;
}

/* Titre légende */
.ev-legend-title {
  font-weight: 600;
  margin-bottom: 4px;
}

/* Ligne légende */
.ev-legend-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 2px 0;
}

.ev-legend-row i {
  font-size: 16px;
}

/* Couleurs identiques à la carte */
.ev-legend-normal {
  color: #007bff;
} /* bleu <= 22 kW */
.ev-legend-mid {
  color: #9b59b6;
} /* mauve 22–100 kW */
.ev-legend-hpc {
  color: #e74c3c;
} /* rouge > 100 kW */
.ev-legend-resto {
  color: #f39c12;
} /* orange restaurants */

/* ----------- CHECKBOX du panneau POI ----------- */
.poi-control input[type='checkbox'] {
  accent-color: #555 !important; /* Gris foncé */
  width: 14px;
  height: 14px;
  cursor: pointer;
}

/* Décalage spécifique pour ton bloc POI */
.leaflet-control.poi-control {
  margin-top: 3px !important;
  margin-left: 3px !important;
}
.leaflet-top.leaflet-left .leaflet-control {
  margin-top: 3px !important;
  margin-left: 3px !important;
}
.routes-summary tbody tr.selected {
  background-color: #dbeafe !important; /* bleu clair */
  font-weight: 600;
  color: #1e3a8a;
}
.steps-header {
  display: flex;
  justify-content: space-between; /* titre à gauche, bouton à droite */
  align-items: center;
  margin: 6px 0 8px 0;
}

.steps-header h3 {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 600;
}

.swap-btn {
  background: #2563eb;
  color: #fff;
  border: none;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: 0.2s ease-in-out;
}

.swap-btn:hover {
  background: #1e40af;
}
.btn-primary {
  background: #2563eb;
  color: #fff;
  border: none;
  padding: 6px 14px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 500;
  transition: background 0.2s ease-in-out;
}

.btn-primary:hover {
  background: #1e40af;
}

.btn-small {
  padding: 4px 10px;
  font-size: 0.85rem;
}

.icon-toggle {
  position: relative;
  width: 1.2em;
  height: 1.2em;
  display: inline-block;
}

.icon-toggle .base,
.icon-toggle .slash {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 1.15em;
  line-height: 1.2em;
}

.icon-toggle .slash {
  color: #d00;
  opacity: 0; /* invisible par défaut */
  transition: opacity 0.2s;
}

.opt-route input:checked + .icon-toggle .slash {
  opacity: 1; /* visible si coché */
}

.label-text {
  transition: color 0.2s;
}
.route-options-line {
  display: flex;
  align-items: center;
  gap: 25px;
  padding: 8px 0;
}

.route-options-title {
  font-weight: 600;
  white-space: nowrap;
}

.opt-route.inline {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.opt-route.inline input {
  cursor: pointer;
}

.icon-toggle {
  position: relative;
  width: 1.2em;
  height: 1.2em;
  display: inline-block;
}

.icon-toggle .base,
.icon-toggle .slash {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 1.1em;
  line-height: 1.2em;
}

.icon-toggle .slash {
  color: #d00;
  opacity: 0; /* invisible par défaut */
  transition: opacity 0.2s ease;
}

.opt-route input:checked + .icon-toggle .slash {
  opacity: 1; /* trait rouge quand coché */
}

.label-text {
  transition: color 0.2s;
  white-space: nowrap;
}
.battery i {
  color: #00c853; /* green accent */
}
.step-marker {
  background: white;
  border-radius: 50%;
  border: 1px solid black;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.step-marker i {
  color: #00c853; /* VERT VE */
  font-size: 18px;
}

/* =========================
   📱 Responsive smartphone
   ========================= */
@media (max-width: 900px) {
  body {
    font-size: 14px;
  }

  .app-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .app-header .brand {
    flex-wrap: wrap;
  }

  .app-header .btn-primary,
  #settingsBtn {
    align-self: stretch;
    width: 100%;
    text-align: center;
  }

  /* Zone Départ / Arrivée */
  .controls {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: flex-end;
  }

  .controls .field {
    flex: 1 1 100%;
  }

  .controls .field.small {
    flex: 1 1 calc(50% - 4px);
  }

  #planButton {
    width: 100%;
    margin-top: 4px;
  }

  /* Barre des modes d’arrêt */
  .stopsbar {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px;
    margin-top: 8px;
    border-radius: 8px;
  }

  .stop-title {
    font-size: 0.95rem;
    margin-bottom: 4px;
  }

  .stop-option {
    padding: 8px;
  }

  .stop-option .label {
    font-size: 0.9rem;
    flex-wrap: wrap;
  }

  .stop-option .row {
    flex-direction: row;
    align-items: center;
    gap: 8px;
  }

  .stop-option input[type='range'] {
    flex: 1 1 auto;
  }

  .stop-option .badge {
    min-width: 60px;
    text-align: right;
  }

  /* Layout carte + panneau */
  .layout {
    flex-direction: column;
  }

  #map {
    width: 100%;
    height: 260px; /* tu peux augmenter à 320px si tu veux */
    margin-bottom: 10px;
  }

  /* Empêche les règles précédentes d'écraser celles-ci */
  .table-wrap {
    width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    display: block !important;
    position: relative !important;
  }

  /* TABLE : largeur réelle = contenu, jamais compressée */
  .table-wrap table {
    width: max-content !important;
    min-width: 950px !important; /* tu peux réduire à 850 si tu veux */
    border-collapse: collapse !important;
    table-layout: auto !important;
  }

  /* Empêche le retour des mots = évite les colonnes sur 2 lignes */
  .table-wrap table th,
  .table-wrap table td {
    white-space: nowrap !important;
    padding: 5px 6px !important;
    font-size: 0.85rem !important;
    line-height: 1.2 !important;
  }

  /* 🗺️ Correction du scroll vertical quand la carte est touchée */
  #map {
    touch-action: pan-y !important; /* autorise le scroll vertical */
    height: 250px !important; /* réduit pour laisser la place */
    min-height: 250px !important;
  }

  /* Le panneau latéral devient déroulant */
  .panel {
    max-height: none !important;
    overflow-y: visible !important;
  }
}
/* ============================================================
   📱 FIX FINAL TABLEAUX + CARTE SUR SMARTPHONE
   - Scroll horizontal OK
   - Colonnes "km rechargés" et "% batterie" masquées
   ============================================================ */
@media (max-width: 900px) {
  /* --- Layout global panel + map --- */
  .layout {
    flex-direction: column;
  }

  #map {
    width: 100% !important;
    height: 250px !important;
    min-height: 250px !important;
    touch-action: pan-y !important; /* permet de scroller la page verticalement */
    margin-bottom: 10px;
  }

  .panel {
    width: 100% !important;
    max-height: none !important;
    overflow: visible !important;
  }

  /* --- Conteneur des tableaux : scroll horizontal garanti --- */
  .table-wrap {
    width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    display: block !important;
    position: relative !important;
    border-radius: 6px;
  }

  /* --- Tableau : largeur = contenu réel, jamais forcée à l'écran --- */
  .table-wrap table {
    width: max-content !important;
    min-width: 700px !important; /* tu peux monter à 850/900 si besoin */
    border-collapse: collapse !important;
    table-layout: auto !important;
  }

  .table-wrap table th,
  .table-wrap table td {
    white-space: nowrap !important;
    padding: 5px 6px !important;
    font-size: 0.85rem !important;
    line-height: 1.2 !important;
  }

  /* --- MASQUER sur smartphone les colonnes "km rechargés" (8) et "% batterie" (9) --- */
  #stepsTable th:nth-child(8),
  #stepsTable td:nth-child(8),
  #stepsTable th:nth-child(9),
  #stepsTable td:nth-child(9) {
    display: none !important;
  }

  /* Si tu as aussi un tableau Itinéraires avec id="routesTable",
     on lui applique le même comportement de scroll */
  #routesTable {
    width: max-content !important;
    min-width: 500px !important;
  }
}

/* Footer moderne clair/sombre avec dégradé */
#pageFooter {
  background: linear-gradient(
    180deg,
    rgba(240, 240, 245, 0.95),
    rgba(230, 230, 235, 0.95)
  );
  border-top: 1px solid rgba(180, 180, 190, 0.5);
  text-align: center;
  padding: 10px 0;
  font-family: system-ui, sans-serif;
  font-size: 0.92em;
  color: #333;
  box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease-in-out;
}

#pageFooter .footer-content {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

#pageFooter a {
  color: #0066cc;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s ease;
}

#pageFooter a:hover {
  color: #004080;
  text-decoration: underline;
}

#pageFooter .separator {
  color: #888;
}
#pageFooter {
  flex-shrink: 0;
}
.logo-itinerg {
  width: 32px;
  height: 32px;
  object-fit: contain;
  vertical-align: middle;
}

.loading-banner {
  position: fixed;
  top: 56px;
  left: 0;
  right: 0;
  z-index: 9999;
  background: rgba(15, 23, 42, 0.96); /* bleu nuit */
  color: #facc15; /* jaune doux */
  padding: 6px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.loading-banner.hidden {
  display: none;
}

.loading-spinner {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid #ffffff;
  border-top-color: transparent;
  animation: spin-loading 0.8s linear infinite;
}

@keyframes spin-loading {
  to {
    transform: rotate(360deg);
  }
}

/* Optionnel : style du bouton en cours de calcul */
#planButton.is-loading {
  opacity: 0.7;
  cursor: wait;
}

/* Apparence pour les cellules éditables */
.recharge-cell {
  position: relative;
  background: #eaf5ff; /* bleu léger */
  cursor: pointer;
  transition: background 0.2s ease;
  padding-right: 22px !important; /* place pour l’icône */
}

/* Petite icône ✏️ */
.recharge-cell .edit-icon {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  color: #007bff;
  opacity: 0.4;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

/* Survol */
.recharge-cell:hover {
  background: #d6ecff;
}

.recharge-cell:hover .edit-icon {
  opacity: 1;
}

/* Dernière ligne (non éditable) */
.recharge-cell.disabled {
  background: #f4f4f4 !important;
  cursor: default !important;
}

.recharge-cell.disabled:hover {
  background: #f4f4f4 !important;
}

.recharge-cell.disabled .edit-icon {
  display: none;
}

/* Conteneur pour coller les deux boutons à droite */
.header-buttons {
  display: flex;
  align-items: center;
  gap: 8px; /* espace entre les deux boutons (réduire si tu veux) */
}

/* Pour assurer que les deux boutons ont la même hauteur + style cohérent */
.header-buttons .btn-primary {
  padding: 8px 14px;
  font-size: 14px;
  white-space: nowrap; /* éviter les retours ligne */
}

.stop-option i {
  margin-right: 6px;
  font-size: 24px;
}
.stop-option i {
  margin-right: 6px;
  font-size: 20px;
  transition: color 0.2s ease, transform 0.2s ease;
  color: #222; /* noir initial */
}

.stop-option:hover i {
  color: #007bff; /* bleu au survol */
  transform: translateY(-1px); /* petit effet lift */
}
.stop-option[data-opt='distance']:hover i {
  color: #007bff;
}
.stop-option[data-opt='time']:hover i {
  color: #f39c12;
}
.stop-option[data-opt='soc']:hover i {
  color: #28a745;
}

.saved-table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.9rem;
}

.saved-table th,
.saved-table td {
  border-bottom: 1px solid #ddd;
  padding: 4px 6px;
  text-align: left;
}

.saved-table td button {
  padding: 4px 6px;
  border-radius: 6px;
  cursor: pointer;
}

.saved-load-btn {
  background: #2563eb;
  color: white;
  border: none;
}

.saved-delete-btn {
  background: #dc2626;
  color: white;
  border: none;
}

/* Modale Itinéraires & Liens */
#routesLinksModal .modal-content {
  width: min(850px, 92vw); /* largeur correcte */
  max-height: 90vh; /* évite le débordement vertical */
  overflow-y: auto; /* scroll interne si besoin */
  padding: 20px;
}

#routesLinksModal h2 {
  font-size: 1.4rem;
  margin-bottom: 10px;
}

#routesLinksModal h3 {
  margin-top: 12px;
  font-size: 1.2rem;
}

/* ============================= */
/*  TABLEAU DES ITINERAIRES      */
/* ============================= */
/* Alignement parfait du tableau sous la grille */
#routesLinksModal .modal-content {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.modal-header,
.modal-grid,
.modal-actions {
  padding-left: 20px;
  padding-right: 20px;
}

#savedRoutesList {
  margin-top: 20px;
  width: 100%;
  max-width: 900px; /* largeur identique à ta modale */
  margin-left: auto;
  margin-right: auto; /* centré parfaitement */
}
/* Étend le tableau sur la même largeur que modal-grid */
#routesLinksModal .modal-content {
  padding: 0 20px; /* padding Global */
}

#routesLinksModal .modal-grid {
  margin-bottom: 20px; /* espace propre */
}

#savedRoutesWrapper {
  width: 100%; /* même largeur que modal-grid */
  box-sizing: border-box;
  padding: 0 20px; /* même padding que modal-grid */
}

/* TABLEAU */
.saved-table {
  width: 100%;
  max-width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.saved-table th,
.saved-table td {
  border-bottom: 1px solid #ddd;
  padding: 6px 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Largeurs */
.saved-table th:nth-child(1),
.saved-table td:nth-child(1) {
  width: 40px; /* Date */
}

.saved-table th:nth-child(2),
.saved-table td:nth-child(2),
.saved-table th:nth-child(3),
.saved-table td:nth-child(3) {
  width: 45%; /* De et A */
}

/* Forcer les cellules Charger / Suppr à ne jamais élargir le tableau */
.saved-table td:nth-child(4),
.saved-table td:nth-child(5) {
  width: 40px !important;
  max-width: 40px !important;
  overflow: hidden !important;
  padding: 2px !important;
}

/* Boutons ultra-compacts */
.saved-load-btn,
.saved-delete-btn {
  display: inline-block;
  width: 55px !important; /* largeur contrôlée */
  text-align: center;
  font-size: 0.7rem !important; /* petit texte */
  padding: 3px 0 !important; /* réduit verticalement */
  border-radius: 4px !important;
  overflow: hidden;
  white-space: nowrap;
}

.saved-load-btn {
  background: #2563eb;
}
.saved-delete-btn {
  background: #dc2626;
}
#savedRoutesList {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
  padding: 0 !important;
}

.saved-table {
  width: 100% !important;
  max-width: 100% !important;
  table-layout: fixed !important;
  border-collapse: collapse;
}

.saved-table thead,
.saved-table tbody,
.saved-table tr,
.saved-table th,
.saved-table td {
  width: auto !important;
  max-width: 100% !important;
  overflow: hidden !important;
  padding: 6px 8px;
}
#routesLinksModal .modal-content {
  width: 100% !important;
  max-width: 900px !important; /* ta largeur de modale */
  overflow-x: hidden !important;
}

.step {
  background: white;
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 15px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.step-text {
  flex: 1;
  padding-right: 12px;
}

.step-marker i {
  pointer-events: none;
}

.ev-offset-icon {
  transform: translateX(25px);
}
.double-marker {
  position: relative;
  width: 46px;
  height: 26px;
}

.double-marker .step-icon {
  position: absolute;
  left: 0px;
  top: 0px;
  font-size: 22px;
  color: #ffcc00; /* jaune pour ⚡, modifiable */
  pointer-events: auto;
  cursor: pointer;
}

.double-marker .ev-icon {
  position: absolute;
  left: 22px; /* décalage horizontal */
  top: 0px;
  font-size: 22px;
  pointer-events: auto;
  cursor: pointer;
}