*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --green-dark: #1a3a2a;
  --green-mid: #2d6a4f;
  --green-light: #52b788;
  --blue: #00b4d8;
  --white: #ffffff;
  --text-light: #e8f5e9;
  --shadow: 0 2px 12px rgba(0, 0, 0, .35);
  --radius: 12px;
  --header-h: 60px;
  --routebar-h: 48px;
}

html,
body {
  height: 100%;
  width: 100%;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--green-dark);
  color: var(--white);
  -webkit-tap-highlight-color: transparent;
}

/* ── Header ── */
.app-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-h);
  background: var(--green-dark);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  z-index: 1000;
  box-shadow: var(--shadow);
  background-clip: padding-box;
  will-change: transform;
  backface-visibility: hidden;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.app-logo {
  font-size: 22px;
}

.app-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-light);
  letter-spacing: .5px;
}

.hydro-badge {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  background: #333;
  transition: background .3s;
}

.hydro-badge.green {
  background: #1b5e20;
}

.hydro-badge.red {
  background: #b71c1c;
}

.hydro-badge.orange {
  background: #e65100;
}

.hydro-badge.hidden {
  display: none;
}

/* ── Barre parcours ── */
.route-bar {
  position: fixed;
  top: var(--header-h);
  left: 0;
  right: 0;
  height: var(--routebar-h);
  background: rgba(26, 58, 42, .95);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  z-index: 999;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.route-select {
  flex: 1;
  background: rgba(255, 255, 255, .1);
  color: var(--white);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 13px;
  appearance: none;
  cursor: pointer;
}

.route-select option {
  background: #1a3a2a;
  color: #fff;
}

.route-info {
  display: flex;
  align-items: center;
  gap: 6px;
}

.route-info.hidden {
  display: none;
}

.badge-info {
  font-size: 11px;
  color: var(--text-light);
}

.badge-diff {
  font-size: 12px;
  font-weight: 700;
}

/* ── Carte ── */
#map {
  position: fixed;
  top: calc(var(--header-h) + var(--routebar-h));
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}

/* ── Panneau GPS ── */
.gps-panel {
  position: fixed;
  bottom: 80px;
  left: 12px;
  background: rgba(26, 58, 42, .92);
  border: 1px solid rgba(82, 183, 136, .4);
  border-radius: var(--radius);
  padding: 8px 12px;
  z-index: 900;
  min-width: 160px;
  backdrop-filter: blur(6px);
  box-shadow: var(--shadow);
}

.gps-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.gps-row+.gps-row {
  margin-top: 4px;
}

.gps-status {
  font-size: 12px;
  font-weight: 600;
}

.gps-status.on {
  color: #69f0ae;
}

.gps-status.off {
  color: #aaa;
}

.gps-status.error {
  color: #ff5252;
}

.gps-accuracy {
  font-size: 11px;
  color: #aaa;
}

.gps-accuracy.hidden {
  display: none;
}

.gps-stat {
  font-size: 12px;
  color: var(--text-light);
}

/* ── FABs ── */
.fab-group {
  position: fixed;
  bottom: 20px;
  right: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  z-index: 900;

  /* ── Boutons FAB & Speed Dial ── */
  .fab-container {
    position: fixed;
    right: 14px;
    bottom: 20px;
    display: flex;
    flex-direction: column-reverse;
    gap: 12px;
    z-index: 2000;
  }

  .speed-dial {
    position: relative;
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    gap: 10px;
  }

  .speed-dial-main {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: var(--green-mid);
    color: white;
    border: none;
    box-shadow: var(--shadow);
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform .3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 2;
    background-clip: padding-box;
    will-change: transform;
    backface-visibility: hidden;
  }

  .speed-dial-main:active {
    transform: scale(.9);
  }

  .speed-dial.active .speed-dial-main {
    transform: rotate(45deg);
    background: #b71c1c;
  }

  .speed-dial-list {
    display: none;
    flex-direction: column-reverse;
    gap: 10px;
    position: absolute;
    bottom: 64px;
    opacity: 0;
    transform: translateY(20px);
    transition: all .3s ease;
  }

  .speed-dial.active .speed-dial-list {
    display: flex;
    opacity: 1;
    transform: translateY(0);
  }

  .fab-sub {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(45, 106, 79, 0.9);
    color: white;
    border: 1px solid rgba(255, 255, 255, .2);
    box-shadow: var(--shadow);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 20px;
    transition: transform .2s, background .2s;
    background-clip: padding-box;
    will-change: transform;
    backface-visibility: hidden;
  }

  .fab-sub:hover {
    background: var(--green-light);
    transform: scale(1.1);
  }

  .fab-label {
    position: absolute;
    right: 54px;
    background: rgba(0, 0, 0, .7);
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
    white-space: nowrap;
    pointer-events: none;
  }

  /* ── Modal POI ── */
  .poi-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .55);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    z-index: 2000;
    padding-bottom: env(safe-area-inset-bottom, 0);
  }

  .poi-modal.hidden {
    display: none;
  }

  .poi-modal-content {
    background: #1e2d1e;
    width: 100%;
    max-width: 500px;
    border-radius: 20px 20px 0 0;
    padding: 20px 20px calc(20px + env(safe-area-inset-bottom, 0));
    position: relative;
    max-height: 75vh;
    overflow-y: auto;
    box-shadow: 0 -4px 24px rgba(0, 0, 0, .5);
  }

  .poi-close {
    position: absolute;
    top: 14px;
    right: 14px;
    background: rgba(255, 255, 255, .1);
    border: none;
    color: #fff;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 14px;
  }

  .poi-img-wrap {
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 12px;
  }

  .poi-img-wrap img {
    width: 100%;
    height: 180px;
    object-fit: cover;
  }

  .poi-img-wrap.hidden {
    display: none;
  }

  .poi-type-badge {
    display: inline-block;
    background: var(--green-mid);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: .5px;
  }

  .poi-modal-content h2 {
    font-size: 19px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 8px;
  }

  .poi-modal-content p {
    font-size: 14px;
    color: #c8e6c9;
    line-height: 1.55;
  }

  .poi-altitude {
    font-size: 13px;
    color: var(--green-light);
    margin-top: 10px;
  }

  .poi-altitude.hidden {
    display: none;
  }

  /* ── Leaflet overrides ── */
  .poi-icon {
    background: none !important;
    border: none !important;
  }

  .poi-cluster .cluster-icon {
    width: 40px;
    height: 40px;
    background: var(--green-mid);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid #fff;
    box-shadow: var(--shadow);
  }

  .poi-cluster .cluster-icon span {
    color: #fff;
    font-size: 13px;
    font-weight: 700;
  }

  .leaflet-attribution-flag {
    display: none !important;
  }

  /* ── Toast alertes proximité POI ── */
  #toast-container {
    position: fixed;
    top: calc(var(--header-h) + var(--routebar-h) + 10px);
    left: 50%;
    transform: translateX(-50%);
    width: min(90vw, 360px);
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 3000;
    pointer-events: none;
  }

  .poi-toast {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(26, 58, 42, .97);
    border: 1px solid var(--green-light);
    border-radius: var(--radius);
    padding: 12px 14px;
    box-shadow: var(--shadow);
    opacity: 0;
    transform: translateY(-12px);
    transition: opacity .3s, transform .3s;
    pointer-events: auto;
  }

  .poi-toast.visible {
    opacity: 1;
    transform: translateY(0);
  }

  .toast-emoji {
    font-size: 26px;
    flex-shrink: 0;
  }

  .toast-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .toast-body strong {
    font-size: 14px;
    color: #fff;
  }

  .toast-body span {
    font-size: 12px;
    color: #a5d6a7;
  }

  /* ── Badge tracé rivière ── */
  .river-badge {
    font-size: 11px;
    color: #80cbc4;
    margin-top: 4px;
  }

  /* ── ETA panel ── */
  .eta-panel {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(82, 183, 136, .3);
  }

  .eta-panel.hidden {
    display: none;
  }

  .eta-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 3px;
  }

  .eta-label {
    font-size: 10px;
    color: #80cbc4;
    text-transform: uppercase;
    letter-spacing: .4px;
    flex-shrink: 0;
  }

  .eta-value {
    font-size: 12px;
    color: #e8f5e9;
    font-weight: 600;
    text-align: right;
  }

  /* ── Mode nuit ── */
  body.night-mode {
    filter: brightness(.9);
  }

  body.night-mode .app-header,
  body.night-mode .route-bar,
  body.night-mode .gps-panel {
    background: rgba(5, 10, 8, .95) !important;
  }

  body.night-mode .fab-main {
    background: #1b4030;
  }

  #btn-night span {
    font-size: 18px;
    line-height: 1;
  }

  /* ── Boussole ── */
  .compass-row {
    margin-top: 4px;
  }

  .compass-widget {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  #compass-needle {
    transition: transform .3s ease;
    opacity: .3;
  }

  /* ── Badge groupe header ── */
  .group-badge {
    display: flex;
    align-items: center;
    gap: 4px;
    background: #1565c0;
    border-radius: 20px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 700;
    margin-right: 6px;
  }

  .group-badge.hidden {
    display: none;
  }

  /* ── Marqueurs membres groupe (Leaflet) ── */
  .group-marker {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .4);
    font-size: 16px;
    font-weight: 700;
    color: #fff;
  }

  /* ── Modaux bas de page (groupe + historique) ── */
  .bottom-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .55);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    z-index: 2000;
    padding-bottom: env(safe-area-inset-bottom, 0);
  }

  .bottom-modal.hidden {
    display: none;
  }

  .bottom-modal-content {
    background: #1e2d1e;
    width: 100%;
    max-width: 520px;
    border-radius: 20px 20px 0 0;
    padding: 20px 20px calc(20px + env(safe-area-inset-bottom, 0));
    position: relative;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 -4px 24px rgba(0, 0, 0, .5);
  }

  .bottom-modal-content h3 {
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 16px;
  }

  .modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    background: rgba(255, 255, 255, .1);
    border: none;
    color: #fff;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 14px;
  }

  /* ── Formulaire modal groupe ── */
  .modal-field {
    margin-bottom: 12px;
  }

  .modal-field label {
    display: block;
    font-size: 12px;
    color: #80cbc4;
    margin-bottom: 4px;
  }

  .modal-field input {
    width: 100%;
    padding: 10px 12px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 8px;
    color: #fff;
    font-size: 15px;
  }

  .modal-field input::placeholder {
    color: rgba(255, 255, 255, .3);
  }

  .modal-actions {
    margin-top: 14px;
  }

  .btn-primary {
    width: 100%;
    padding: 12px;
    background: var(--green-mid);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
  }

  .btn-primary:active {
    opacity: .85;
  }

  .btn-danger {
    width: 100%;
    padding: 10px;
    background: #b71c1c;
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    cursor: pointer;
    margin-top: 10px;
  }

  .btn-copy {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
    margin-left: 6px;
    vertical-align: middle;
  }

  .group-code-display {
    background: rgba(255, 255, 255, .08);
    border-radius: 8px;
    padding: 12px 14px;
    font-size: 15px;
    margin-bottom: 10px;
    letter-spacing: .5px;
  }

  .group-code-display strong {
    font-size: 22px;
    letter-spacing: 4px;
    color: #69f0ae;
  }

  .modal-info {
    font-size: 13px;
    color: #a5d6a7;
    margin: 8px 0;
  }

  /* ── Historique sessions ── */
  .history-item {
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
  }

  .history-item:last-child {
    border-bottom: none;
  }

  .history-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 5px;
  }

  .history-head strong {
    font-size: 14px;
    color: #fff;
  }

  .history-date {
    font-size: 11px;
    color: #80cbc4;
  }

  .history-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 12px;
    color: #a5d6a7;
  }

  /* ── Boutons FAB ── */
  .fab-secondary span {
    font-size: 18px;
    line-height: 1;
  }

  /* ── Splash screen ── */
  .splash {
    position: fixed;
    inset: 0;
    z-index: 9000;
    background: linear-gradient(160deg, #0d2115 0%, #1a3a2a 50%, #0d2115 100%);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .splash.hidden {
    display: none;
  }

  .splash-content {
    text-align: center;
    padding: 32px 24px;
    max-width: 380px;
    width: 100%;
  }

  .splash-logo {
    font-size: 64px;
    margin-bottom: 12px;
    display: block;
  }

  .splash-title {
    font-size: 26px;
    font-weight: 800;
    color: #e8f5e9;
    margin-bottom: 6px;
  }

  .splash-sub {
    font-size: 14px;
    color: #80cbc4;
    margin-bottom: 28px;
  }

  .splash-field {
    margin-bottom: 20px;
    text-align: left;
  }

  .splash-field label {
    display: block;
    font-size: 12px;
    color: #80cbc4;
    margin-bottom: 6px;
  }

  .splash-field input {
    width: 100%;
    padding: 14px 16px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 10px;
    color: #fff;
    font-size: 16px;
  }

  .splash-field input::placeholder {
    color: rgba(255, 255, 255, .3);
  }

  .splash-btn {
    width: 100%;
    padding: 16px;
    border: none;
    border-radius: 12px;
    background: var(--green-mid);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(45, 106, 79, .5);
    transition: transform .15s, opacity .15s;
  }

  .splash-btn:active {
    transform: scale(.97);
    opacity: .9;
  }

  .splash-note {
    font-size: 11px;
    color: rgba(255, 255, 255, .3);
    margin-top: 14px;
  }

  @keyframes splashOut {
    to {
      opacity: 0;
      transform: scale(1.04);
    }
  }

  .splash-out {
    animation: splashOut .4s ease forwards;
  }

  /* ── Route info bar (sous la route-bar) ── */
  .route-info-bar {
    position: fixed;
    top: calc(var(--header-h) + var(--routebar-h));
    left: 0;
    right: 0;
    height: 30px;
    background: rgba(26, 58, 42, .92);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 12px;
    z-index: 998;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
    font-size: 12px;
  }

  .route-info-bar.hidden {
    display: none;
  }

  #map {
    top: calc(var(--header-h) + var(--routebar-h));
  }

  body:has(.route-info-bar:not(.hidden)) #map {
    top: calc(var(--header-h) + var(--routebar-h) + 30px);
  }

  /* ── Recherche POI ── */
  .search-wrap {
    position: relative;
    flex: 1;
  }

  .poi-search-input {
    width: 100%;
    padding: 7px 30px 7px 10px;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 8px;
    color: #fff;
    font-size: 13px;
    appearance: none;
    -webkit-appearance: none;
  }

  .poi-search-input::placeholder {
    color: rgba(255, 255, 255, .4);
  }

  .poi-search-input::-webkit-search-cancel-button {
    display: none;
  }

  .search-clear-btn {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: rgba(255, 255, 255, .5);
    font-size: 12px;
    cursor: pointer;
    padding: 4px;
  }

  .search-results {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #1a2e1f;
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 8px;
    z-index: 1100;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .4);
  }

  .search-results.hidden {
    display: none;
  }

  .search-result-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    cursor: pointer;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    transition: background .12s;
  }

  .search-result-item:last-child {
    border-bottom: none;
  }

  .search-result-item:hover {
    background: rgba(255, 255, 255, .08);
  }

  .sri-emoji {
    font-size: 18px;
    flex-shrink: 0;
  }

  .sri-body {
    flex: 1;
    min-width: 0;
  }

  .sri-body strong {
    display: block;
    font-size: 13px;
    color: #e8f5e9;
  }

  .sri-body mark {
    background: rgba(82, 183, 136, .4);
    color: inherit;
    border-radius: 2px;
  }

  .sri-alt {
    font-size: 11px;
    color: #80cbc4;
  }

  .search-no-result {
    padding: 12px;
    font-size: 13px;
    color: #80cbc4;
    text-align: center;
  }

  /* ── Stats session panel (haut gauche) ── */
  .stats-panel {
    position: fixed;
    top: calc(var(--header-h) + var(--routebar-h) + 44px);
    right: 12px;
    background: rgba(26, 58, 42, .95);
    border: 1px solid rgba(82, 183, 136, .3);
    border-radius: var(--radius);
    padding: 10px 12px;
    z-index: 900;
    min-width: 180px;
    backdrop-filter: blur(6px);
    box-shadow: var(--shadow);
  }

  .stats-panel.hidden {
    display: none;
  }

  .stats-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 700;
    color: #80cbc4;
  }

  .stats-close {
    background: none;
    border: none;
    color: rgba(255, 255, 255, .5);
    font-size: 14px;
    cursor: pointer;
    padding: 0;
  }

  .stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .stats-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .sc-label {
    font-size: 10px;
    color: #80cbc4;
    text-transform: uppercase;
    letter-spacing: .4px;
  }

  .sc-val {
    font-size: 13px;
    font-weight: 700;
    color: #e8f5e9;
  }

  /* ── Widget météo ── */
  .mw-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
  }

  .mw-title {
    font-size: 15px;
    font-weight: 700;
    color: #e8f5e9;
  }

  .mw-nav {
    font-size: 13px;
    font-weight: 600;
  }

  .mw-nav.nav-ok {
    color: #69f0ae;
  }

  .mw-nav.nav-closed {
    color: #ff5252;
  }

  .mw-nav.nav-warn {
    color: #ffd54f;
  }

  .mw-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
    margin-bottom: 10px;
  }

  .mw-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: rgba(255, 255, 255, .06);
    border-radius: 8px;
    padding: 8px 10px;
  }

  .mw-label {
    font-size: 10px;
    color: #80cbc4;
    text-transform: uppercase;
    letter-spacing: .4px;
  }

  .mw-val {
    font-size: 14px;
    font-weight: 700;
    color: #e8f5e9;
  }

  .mw-time {
    font-size: 11px;
    font-weight: 400;
    color: #80cbc4;
  }

  .mw-advice {
    background: rgba(82, 183, 136, .12);
    border-left: 3px solid var(--green-light);
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 13px;
    color: #c8e6c9;
    line-height: 1.5;
  }

  /* ── Bouton SOS (fixe bas gauche) ── */
  .sos-btn {
    position: fixed;
    bottom: 20px;
    left: 16px;
    z-index: 950;
    background: #c62828;
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    border: none;
    border-radius: 30px;
    padding: 13px 20px;
    box-shadow: 0 4px 16px rgba(198, 40, 40, .6);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    letter-spacing: .5px;
    transition: transform .15s, box-shadow .15s;
    animation: sos-pulse 3s ease-in-out infinite;
  }

  .sos-btn:active {
    transform: scale(.95);
  }

  @keyframes sos-pulse {

    0%,
    100% {
      box-shadow: 0 4px 16px rgba(198, 40, 40, .6);
    }

    50% {
      box-shadow: 0 4px 28px rgba(198, 40, 40, .9);
    }
  }

  /* ── Dead Man's Switch actif ── */
  .dms-active {
    background: #1565c0 !important;
  }

  .dms-active span::after {
    content: ' ●';
    color: #69f0ae;
    font-size: 8px;
  }

  /* ── Marqueurs danger Leaflet ── */
  .danger-marker {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .4);
    font-size: 16px;
    cursor: pointer;
    animation: danger-pulse 2.5s ease-in-out infinite;
  }

  @keyframes danger-pulse {

    0%,
    100% {
      transform: scale(1);
    }

    50% {
      transform: scale(1.08);
    }
  }

  /* ── Toast danger (rouge) ── */
  .danger-toast {
    border-left: 4px solid #c62828 !important;
  }

  .danger-toast .toast-body strong {
    color: #ff5252 !important;
  }

  /* ── Toasts SOS ── */
  #sos-toast-container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 4000;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    pointer-events: none;
  }

  .sos-toast {
    padding: 14px 20px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .5);
    opacity: 0;
    transform: scale(.9);
    transition: opacity .3s, transform .3s;
    pointer-events: auto;
    max-width: 320px;
    text-align: center;
  }

  .sos-toast.visible {
    opacity: 1;
    transform: scale(1);
  }

  .sos-toast-sos {
    background: #c62828;
    color: #fff;
  }

  .sos-toast-ok {
    background: #1b5e20;
    color: #fff;
  }

  .sos-toast-warn {
    background: #e65100;
    color: #fff;
  }

  .sos-toast-info {
    background: #1565c0;
    color: #fff;
  }

  .sos-toast-error {
    background: #4a148c;
    color: #fff;
  }

  /* ── Jauge débit ── */
  .debit-gauge-wrap {
    margin-top: 12px;
  }

  .dg-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 4px;
  }

  .dg-label {
    font-size: 11px;
    color: #80cbc4;
    text-transform: uppercase;
  }

  .dg-val {
    font-size: 14px;
    font-weight: 700;
  }

  .dg-bar-bg {
    position: relative;
    height: 8px;
    background: rgba(255, 255, 255, .1);
    border-radius: 4px;
    overflow: visible;
  }

  .dg-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width .6s ease, background .6s ease;
  }

  .dg-seuil-marker {
    position: absolute;
    top: -4px;
    width: 3px;
    height: 16px;
    background: #fff;
    border-radius: 2px;
    transform: translateX(-50%);
  }

  .dg-footer {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: #80cbc4;
    margin-top: 3px;
  }

  /* ── Route bar : select moins large ── */
  .route-bar {
    gap: 8px;
  }

  .route-select {
    flex: 0 0 auto;
    max-width: 160px;
    font-size: 12px;
  }

  /* ══════════════════════════════════════════════════════
   SOS BROADCAST OVERLAY
══════════════════════════════════════════════════════ */
  .sos-broadcast-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, .75);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .3s;
  }

  .sos-broadcast-overlay.sbo-visible {
    opacity: 1
  }

  .sbo-inner {
    background: #1a0808;
    border: 3px solid #c62828;
    border-radius: 20px;
    padding: 32px 28px;
    text-align: center;
    max-width: 340px;
    width: 90%;
    box-shadow: 0 0 60px rgba(198, 40, 40, .6);
    animation: sbo-pulse 1s ease-in-out infinite alternate;
  }

  @keyframes sbo-pulse {
    from {
      box-shadow: 0 0 40px rgba(198, 40, 40, .4)
    }

    to {
      box-shadow: 0 0 80px rgba(198, 40, 40, .9)
    }
  }

  .sbo-pulse {
    font-size: 64px;
    animation: spin-pulse 1.5s linear infinite
  }

  @keyframes spin-pulse {
    0% {
      transform: scale(1)
    }

    50% {
      transform: scale(1.2)
    }

    100% {
      transform: scale(1)
    }
  }

  .sbo-title {
    font-size: 22px;
    font-weight: 900;
    color: #ff5252;
    margin: 12px 0 4px;
    letter-spacing: 2px
  }

  .sbo-who {
    font-size: 16px;
    color: #fff;
    margin: 4px 0 8px
  }

  .sbo-msg {
    font-size: 13px;
    color: #aaa;
    margin-bottom: 20px
  }

  .sbo-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap
  }

  .sbo-btn {
    padding: 12px 20px;
    border-radius: 10px;
    border: none;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer
  }

  .sbo-goto {
    background: #c62828;
    color: #fff
  }

  .sbo-goto:hover {
    background: #b71c1c
  }

  .sbo-close {
    background: rgba(255, 255, 255, .1);
    color: #ccc
  }

  /* SOS marker sur la carte */
  .sos-map-marker {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(198, 40, 40, .9);
    border: 3px solid #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    box-shadow: 0 0 20px rgba(198, 40, 40, .8);
    animation: sos-map-pulse 1s ease-in-out infinite alternate;
  }

  @keyframes sos-map-pulse {
    from {
      box-shadow: 0 0 10px rgba(198, 40, 40, .5);
      transform: scale(1)
    }

    to {
      box-shadow: 0 0 30px rgba(198, 40, 40, 1);
      transform: scale(1.08)
    }
  }

  .sos-map-label {
    font-size: 9px;
    font-weight: 700;
    color: #fff;
    line-height: 1
  }

  .sos-popup {
    font-size: 13px
  }

  .sos-popup-header {
    background: #c62828;
    color: #fff;
    padding: 6px 10px;
    margin: -7px -7px 8px;
    border-radius: 6px 6px 0 0;
    font-weight: 700
  }

  .sos-popup-resolve {
    display: block;
    width: 100%;
    margin-top: 8px;
    padding: 8px;
    background: #2e7d32;
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px
  }

  /* ══════════════════════════════════════════════════════
   FLOTTE KAYAKS
══════════════════════════════════════════════════════ */
  .km-summary {
    display: flex;
    gap: 16px;
    margin-bottom: 14px;
    padding: 10px;
    background: rgba(255, 255, 255, .05);
    border-radius: 10px;
  }

  .km-stat {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #ccc
  }

  .km-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0
  }

  .km-dot.dispo {
    background: #52b788
  }

  .km-dot.sortie {
    background: #ff9800
  }

  .km-my-kayak {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(82, 183, 136, .15);
    border: 1px solid rgba(82, 183, 136, .3);
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 12px;
    font-size: 13px;
  }

  .km-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    max-height: 340px;
    overflow-y: auto
  }

  .km-card {
    background: rgba(255, 255, 255, .04);
    border-radius: 10px;
    padding: 10px;
    border-left: 4px solid transparent;
    display: flex;
    gap: 8px;
    align-items: flex-start;
    transition: background .2s;
  }

  .km-card.km-dispo {
    border-left-color: #52b788
  }

  .km-card.km-sortie {
    border-left-color: #ff9800;
    opacity: .8
  }

  .km-card.km-maintenance {
    border-left-color: #888;
    opacity: .6
  }

  .km-card.km-mine {
    background: rgba(82, 183, 136, .12);
    border-left-color: #52b788
  }

  .km-dot-color {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-top: 3px;
    flex-shrink: 0
  }

  .km-card-body {
    flex: 1
  }

  .km-name {
    font-weight: 700;
    font-size: 13px;
    margin-bottom: 3px
  }

  .km-meta {
    font-size: 11px;
    color: #888;
    margin-bottom: 4px
  }

  .km-taken-by {
    font-size: 11px;
    color: #ff9800
  }

  .km-mine-badge {
    font-size: 11px;
    color: #52b788;
    font-weight: 700;
    margin-top: 4px
  }

  .kayak-map-marker {
    width: 40px;
    height: 40px;
    border-radius: 50% 50% 50% 0;
    background: rgba(18, 32, 22, .9);
    border: 3px solid;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .5);
  }

  .kayak-map-label {
    font-size: 8px;
    font-weight: 700;
    line-height: 1
  }

  /* info-toast variante */
  .info-toast {
    border-color: #4cc9f0 !important
  }

  .info-toast .toast-body strong {
    color: #4cc9f0
  }

  /* ══════════════════════════════════════════════════════
   SÉLECTEUR RIVIÈRE
══════════════════════════════════════════════════════ */
  .river-switcher {
    display: flex;
    gap: 4px;
    padding: 0 4px 0 0;
    align-items: center;
  }

  .river-btn {
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .15);
    color: #ccc;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 14px;
    cursor: pointer;
    white-space: nowrap;
    transition: all .2s;
  }

  .river-btn:hover {
    background: rgba(82, 183, 136, .2);
    border-color: #52b788;
    color: #fff
  }

  .river-btn-active {
    background: #52b788 !important;
    border-color: #52b788 !important;
    color: #000 !important
  }

  /* ══════════════════════════════════════════════════════
   POSITIONS PUBLIQUES
══════════════════════════════════════════════════════ */
  .pub-pos-marker {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #ff9800;
    border: 2.5px solid;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000;
    font-size: 10px;
    font-weight: 800;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .5);
  }

  .pub-pos-counter {
    position: fixed;
    bottom: 90px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255, 152, 0, .9);
    color: #000;
    font-size: 12px;
    font-weight: 700;
    padding: 5px 14px;
    border-radius: 20px;
    z-index: 850;
    box-shadow: 0 3px 12px rgba(0, 0, 0, .4);
    pointer-events: none;
  }

  /* ══════════════════════════════════════════════════════
   SESSIONS CLOUD
══════════════════════════════════════════════════════ */
  .cloud-session-row {
    background: rgba(255, 255, 255, .04);
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 8px;
    border-left: 3px solid #52b788;
  }

  .cs-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
  }

  .cs-info-row strong {
    font-size: 13px;
    color: #fff
  }

  .cs-date {
    font-size: 11px;
    color: #888
  }

  .cs-meta-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 11px;
    color: #aaa
  }

  /* ══════════════════════════════════════════════════════
   PROFIL ALTIMÉTRIQUE
══════════════════════════════════════════════════════ */
  .elev-panel {
    position: fixed;
    bottom: -200px;
    left: 0;
    right: 0;
    background: var(--bg-card);
    border-top: 1px solid rgba(255, 255, 255, .12);
    padding: 8px 12px 12px;
    z-index: 900;
    transition: bottom .35s cubic-bezier(.4, 0, .2, 1);
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -4px 24px rgba(0, 0, 0, .4);
  }

  .elev-panel.elev-visible {
    bottom: 0;
  }

  .elev-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
  }

  .ep-title {
    font-weight: 700;
    color: var(--accent);
    font-size: 13px;
    flex: 1
  }

  .ep-stats {
    display: flex;
    gap: 10px;
    font-size: 11px;
    color: #aaa
  }

  .elev-close {
    background: none;
    border: none;
    color: #aaa;
    font-size: 18px;
    cursor: pointer;
    padding: 2px 6px
  }

  .ep-svg-wrap svg {
    display: block
  }

  /* ══════════════════════════════════════════════════════
   PHOTOS GÉOLOCALISÉES
══════════════════════════════════════════════════════ */
  .photo-marker {
    width: 44px;
    height: 44px;
    border-radius: 50% 50% 50% 0;
    border: 3px solid #fff;
    overflow: hidden;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .5);
    transform: rotate(-45deg);
    background: #333;
  }

  .photo-marker img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: rotate(45deg)
  }

  .photo-popup img {
    display: block;
    border-radius: 6px;
    margin-bottom: 6px;
    max-width: 180px
  }

  /* ══════════════════════════════════════════════════════
   COMPARAISON SESSIONS
══════════════════════════════════════════════════════ */
  .compare-session-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 4px;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
    cursor: pointer;
  }

  .compare-session-row:hover {
    background: rgba(255, 255, 255, .04);
    border-radius: 8px
  }

  .compare-cb {
    accent-color: var(--accent);
    width: 16px;
    height: 16px;
    flex-shrink: 0
  }

  .cs-date {
    font-size: 12px;
    color: #aaa;
    white-space: nowrap
  }

  .cs-name {
    flex: 1;
    font-weight: 600;
    font-size: 13px
  }

  .cs-info {
    font-size: 11px;
    color: #888;
    white-space: nowrap
  }

  .compare-dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .4);
  }

  .compare-legend {
    position: fixed;
    top: calc(var(--header-h) + var(--routebar-h) + 8px);
    right: 10px;
    background: var(--bg-card);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 10px;
    padding: 10px 14px;
    z-index: 850;
    font-size: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .4);
    max-width: 200px;
  }

  .compare-legend strong {
    display: block;
    margin-bottom: 6px;
    font-size: 13px
  }

  .compare-legend div {
    margin-bottom: 4px;
    line-height: 1.4
  }

  .compare-legend button {
    width: 100%;
    padding: 6px;
    border-radius: 6px;
    border: none;
    background: rgba(255, 255, 255, .1);
    color: #ccc;
    cursor: pointer;
  }

  /* ══════════════════════════════════════════════════════
   LEADERBOARD
══════════════════════════════════════════════════════ */
  .lb-my-stats {
    background: rgba(82, 183, 136, .1);
    border: 1px solid rgba(82, 183, 136, .25);
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 16px;
  }

  .lb-my-title {
    font-weight: 700;
    color: var(--accent);
    font-size: 13px;
    margin-bottom: 10px
  }

  .lb-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px
  }

  .lb-stat-cell {
    text-align: center
  }

  .lbs-label {
    display: block;
    font-size: 11px;
    color: #888;
    margin-bottom: 2px
  }

  .lbs-val {
    display: block;
    font-size: 18px;
    font-weight: 800;
    color: #fff
  }

  .lb-badges-section {
    margin-bottom: 14px
  }

  .lb-section-title {
    font-weight: 700;
    font-size: 13px;
    color: #aaa;
    margin-bottom: 8px;
    letter-spacing: .5px;
    text-transform: uppercase
  }

  .lb-badges-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .lb-badge-chip {
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 20px;
    padding: 5px 12px;
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    cursor: default;
  }

  .lb-badge-chip span {
    font-size: 18px
  }

  .lb-badge-chip small {
    font-size: 11px;
    color: #aaa
  }

  .lb-table {
    display: flex;
    flex-direction: column;
    gap: 4px
  }

  .lb-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: rgba(255, 255, 255, .04);
    border-radius: 8px;
    font-size: 13px;
  }

  .lb-row.lb-me {
    background: rgba(82, 183, 136, .15);
    border: 1px solid rgba(82, 183, 136, .3)
  }

  .lb-rank {
    font-size: 18px;
    min-width: 32px;
    text-align: center
  }

  .lb-name {
    flex: 1;
    font-weight: 600
  }

  .lb-name small {
    font-size: 14px;
    margin-left: 4px
  }

  .lb-km {
    color: var(--accent);
    font-weight: 700;
    font-size: 13px;
    white-space: nowrap
  }

  .lb-runs {
    font-size: 13px;
    color: #aaa;
    white-space: nowrap
  }

  .badge-toast {
    border-color: #f9a825 !important
  }

  .badge-toast .toast-body strong {
    color: #f9a825
  }

  /* ══════════════════════════════════════════════════════
   AVIS POI
══════════════════════════════════════════════════════ */
  .reviews-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 16px 0 10px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, .1);
  }

  .reviews-avg {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #aaa
  }

  .reviews-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 8px;
    max-height: 200px;
    overflow-y: auto
  }

  .review-item {
    background: rgba(255, 255, 255, .04);
    border-radius: 10px;
    padding: 10px 12px
  }

  .review-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
    flex-wrap: wrap
  }

  .review-pseudo {
    font-weight: 700;
    font-size: 13px;
    color: var(--accent)
  }

  .review-date {
    font-size: 11px;
    color: #666;
    margin-left: auto
  }

  .review-text {
    font-size: 13px;
    color: #ccc;
    margin: 4px 0 0;
    line-height: 1.5
  }

  .star-picker {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin: 14px 0;
    font-size: 36px;
    cursor: pointer
  }

  .star-btn:hover {
    transform: scale(1.2);
    display: inline-block
  }

  .btn-small {
    background: rgba(255, 255, 255, .1);
    border: none;
    border-radius: 16px;
    color: #ccc;
    padding: 5px 12px;
    font-size: 12px;
    cursor: pointer;
    white-space: nowrap;
  }

  .btn-small:hover {
    background: rgba(255, 255, 255, .18)
  }

  /* ══════════════════════════════════════════════════════
   PRÉVISIONS 7 JOURS
══════════════════════════════════════════════════════ */
  .forecast-hydro-banner {
    border: 2px solid;
    border-radius: 10px;
    padding: 10px 14px;
    margin: 16px 0 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .forecast-hydro-banner span {
    font-weight: 700;
    font-size: 14px
  }

  .forecast-hydro-banner small {
    font-size: 11px;
    color: #aaa
  }

  .forecast-title {
    font-weight: 700;
    font-size: 13px;
    color: #aaa;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: .5px
  }

  .forecast-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 4px;
  }

  .forecast-day {
    background: rgba(255, 255, 255, .05);
    border-radius: 10px;
    padding: 8px 4px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 44px;
  }

  .fd-date {
    font-size: 10px;
    color: #888;
    font-weight: 600;
    text-transform: capitalize
  }

  .fd-emoji {
    font-size: 22px;
    line-height: 1.2
  }

  .fd-label {
    font-size: 9px;
    color: #aaa;
    line-height: 1.2
  }

  .fd-temp {
    font-size: 11px
  }

  .fd-max {
    color: #ff9800;
    font-weight: 700
  }

  .fd-min {
    color: #90caf9
  }

  .fd-rain {
    font-size: 10px;
    color: #90caf9
  }

  .fd-wind {
    font-size: 10px;
    color: #aaa
  }

  .fd-nav {
    font-size: 10px;
    font-weight: 700;
    margin-top: 2px
  }

  @media (max-width:360px) {
    .forecast-grid {
      grid-template-columns: repeat(4, 1fr)
    }
  }

  /* ── Utilitaires ── */
  .hidden {
    display: none !important;
  }

  /* ── Safe area iOS ── */
  @supports (padding: max(0px)) {
    .app-header {
      padding-top: max(0px, env(safe-area-inset-top));
      height: calc(var(--header-h) + env(safe-area-inset-top));
    }

    #map {
      top: calc(var(--header-h) + var(--routebar-h) + env(safe-area-inset-top));
    }
  }

  /* ═══════════════════════════════════════════════════════════════
   OFFLINE MANAGER
═══════════════════════════════════════════════════════════════ */
  .offline-badge {
    position: fixed;
    bottom: 70px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, .82);
    color: #ff9800;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 16px;
    border-radius: 20px;
    z-index: 9000;
    pointer-events: none;
    display: none;
  }

  .offline-status {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    padding: 8px 12px;
    border-radius: 10px;
    margin-bottom: 12px;
  }

  .ol-online {
    background: rgba(105, 240, 174, .15);
    color: #69f0ae;
  }

  .ol-offline {
    background: rgba(255, 82, 82, .15);
    color: #ff5252;
  }

  .offline-river-card {
    background: rgba(255, 255, 255, .05);
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 10px;
    border: 1px solid rgba(255, 255, 255, .08);
  }

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

  .orc-name {
    font-weight: 700;
    font-size: 14px;
  }

  .orc-age {
    font-size: 11px;
    color: #888;
  }

  .orc-stats {
    font-size: 12px;
    color: #69f0ae;
    margin-bottom: 6px;
  }

  .orc-progress {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
  }

  .orc-bar {
    flex: 1;
    height: 6px;
    background: rgba(255, 255, 255, .1);
    border-radius: 3px;
    overflow: hidden;
  }

  .orc-fill {
    height: 100%;
    background: #69f0ae;
    border-radius: 3px;
    transition: width .3s;
  }

  .orc-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }

  /* ═══════════════════════════════════════════════════════════════
   BOOKING
═══════════════════════════════════════════════════════════════ */
  .bk-modal-content {
    max-height: 85vh;
    overflow-y: auto;
  }

  .bk-date-section {
    margin-bottom: 14px;
  }

  .bk-date-picker {
    width: 100%;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, .15);
    background: rgba(255, 255, 255, .07);
    color: #fff;
    font-size: 15px;
    margin-top: 6px;
  }

  .bk-section-title {
    font-size: 11px;
    font-weight: 700;
    color: #888;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin: 14px 0 8px;
  }

  .bk-kayak-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, .05);
    border-radius: 10px;
    margin-bottom: 8px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all .2s;
  }

  .bk-kayak-card:hover {
    background: rgba(255, 255, 255, .09);
  }

  .bk-kayak-card.bk-selected {
    border-color: #69f0ae;
    background: rgba(105, 240, 174, .08);
  }

  .bk-kayak-card.bk-unavailable {
    opacity: .45;
    cursor: default;
  }

  .bk-kayak-color {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    flex-shrink: 0;
  }

  .bk-kayak-info {
    flex: 1;
  }

  .bk-kayak-info strong {
    display: block;
    font-size: 14px;
  }

  .bk-kayak-info span {
    font-size: 12px;
    color: #aaa;
  }

  .bk-price {
    color: #69f0ae;
    font-weight: 700;
    font-size: 15px;
  }

  .bk-taken {
    color: #ff5252;
    font-size: 12px;
  }

  .bk-summary {
    background: rgba(105, 240, 174, .08);
    border: 1px solid rgba(105, 240, 174, .2);
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 13px;
    margin-bottom: 12px;
  }

  .bk-form-row {
    margin-bottom: 10px;
  }

  .bk-form-row label {
    display: block;
    font-size: 12px;
    color: #aaa;
    margin-bottom: 4px;
  }

  .bk-form-row input,
  .bk-form-row textarea {
    width: 100%;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, .15);
    background: rgba(255, 255, 255, .07);
    color: #fff;
    font-size: 14px;
  }

  .bk-form-row textarea {
    resize: vertical;
    min-height: 56px;
  }

  .bk-form-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 10px;
  }

  .bk-form-row-2 label {
    display: block;
    font-size: 12px;
    color: #aaa;
    margin-bottom: 4px;
  }

  .bk-form-row-2 select {
    width: 100%;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, .15);
    background: rgba(255, 255, 255, .07);
    color: #fff;
    font-size: 14px;
  }

  .bk-pay-btn {
    width: 100%;
    padding: 14px;
    font-size: 16px;
    margin-top: 8px;
  }

  .bk-info {
    font-size: 11px;
    color: #666;
    text-align: center;
    margin-top: 6px;
  }

  .bk-loading,
  .bk-empty,
  .bk-error {
    text-align: center;
    padding: 20px;
    color: #aaa;
    font-size: 13px;
  }

  .bk-error {
    color: #ff5252;
  }

  .bk-my-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, .05);
    border-radius: 10px;
    margin-bottom: 8px;
    flex-wrap: wrap;
  }

  .bk-my-info {
    flex: 1;
  }

  .bk-my-info strong {
    display: block;
    font-size: 13px;
  }

  .bk-my-info span {
    font-size: 11px;
    color: #aaa;
  }

  .bk-my-status {
    font-size: 12px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
  }

  .bk-my-price {
    color: #69f0ae;
    font-weight: 700;
  }

  .bk-cancel-btn {
    font-size: 11px;
    padding: 4px 10px;
  }

  /* ═══════════════════════════════════════════════════════════════
   WAYPOINTS
═══════════════════════════════════════════════════════════════ */
  .wp-marker {
    width: 28px;
    height: 28px;
    background: #ff9800;
    border: 2px solid #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: #000;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .5);
  }

  .wp-empty {
    text-align: center;
    padding: 20px;
    color: #888;
    font-size: 13px;
  }

  .wp-total {
    font-size: 14px;
    font-weight: 700;
    color: #69f0ae;
    margin-bottom: 10px;
  }

  .wp-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
  }

  .wp-row {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, .05);
    border-radius: 8px;
    padding: 8px 10px;
  }

  .wp-num {
    width: 22px;
    height: 22px;
    background: #ff9800;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: #000;
    flex-shrink: 0;
  }

  .wp-name {
    flex: 1;
    font-size: 13px;
  }

  .wp-seg {
    font-size: 11px;
    color: #aaa;
    flex-shrink: 0;
  }

  .wp-del {
    background: none;
    border: none;
    color: #ff5252;
    cursor: pointer;
    font-size: 14px;
    padding: 0 4px;
  }

  .wp-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }

  /* ═══════════════════════════════════════════════════════════════
   BATTERY SAVER
═══════════════════════════════════════════════════════════════ */
  .battery-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    background: rgba(0, 0, 0, .5);
    border-radius: 10px;
    display: inline-block;
  }

  .batt-level {
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 10px;
  }

  .batt-ok {
    background: rgba(105, 240, 174, .12);
    color: #69f0ae;
  }

  .batt-mid {
    background: rgba(255, 152, 0, .12);
    color: #ff9800;
  }

  .batt-low {
    background: rgba(255, 82, 82, .12);
    color: #ff5252;
  }

  .batt-bar {
    height: 8px;
    background: rgba(255, 255, 255, .1);
    border-radius: 4px;
    overflow: hidden;
    margin-top: 6px;
  }

  .batt-fill {
    height: 100%;
    border-radius: 4px;
    transition: width .3s;
  }

  .batt-status {
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    padding: 8px;
    border-radius: 8px;
    margin-bottom: 10px;
  }

  .batt-active {
    background: rgba(105, 240, 174, .1);
    color: #69f0ae;
  }

  .batt-inactive {
    background: rgba(255, 255, 255, .05);
    color: #aaa;
  }

  .batt-features {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
    margin-top: 10px;
  }

  .batt-feat {
    background: rgba(255, 255, 255, .05);
    border-radius: 8px;
    padding: 8px;
    font-size: 11px;
    text-align: center;
  }

  .batt-feat strong {
    display: block;
    margin-top: 2px;
  }

  /* Mode économie actif — désactiver animations */
  .battery-saver-mode * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }

  .battery-saver-mode .leaflet-tile-container {
    filter: grayscale(0.3);
  }

  /* ═══════════════════════════════════════════════════════════════
   LIVE SHARE
═══════════════════════════════════════════════════════════════ */
  .ls-active-badge {
    background: rgba(105, 240, 174, .12);
    color: #69f0ae;
    font-weight: 700;
    font-size: 14px;
    text-align: center;
    padding: 8px;
    border-radius: 10px;
    margin-bottom: 12px;
  }

  .ls-url-box {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, .07);
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 10px;
    border: 1px solid rgba(255, 255, 255, .12);
  }

  #ls-url-text {
    flex: 1;
    font-size: 12px;
    color: #aaa;
    word-break: break-all;
  }

  .ls-copy-btn {
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    padding: 0 4px;
  }

  .ls-share-btns {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }

  .ls-row {
    margin-bottom: 10px;
  }

  .ls-row label {
    display: block;
    font-size: 12px;
    color: #aaa;
    margin-bottom: 4px;
  }

  .ls-row select {
    width: 100%;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, .15);
    background: rgba(255, 255, 255, .07);
    color: #fff;
    font-size: 14px;
  }

  /* ═══════════════════════════════════════════════════════════════
   RETURN ROUTE
═══════════════════════════════════════════════════════════════ */
  .return-route-panel {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(18, 18, 32, .95);
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 14px;
    padding: 12px 16px;
    z-index: 800;
    min-width: 260px;
    max-width: 340px;
    display: none;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .5);
  }

  .rrp-header {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 6px;
  }

  .rrp-metrics {
    display: flex;
    gap: 16px;
    font-size: 16px;
    font-weight: 700;
    color: #69f0ae;
    margin-bottom: 8px;
  }

  .rrp-actions {
    display: flex;
    gap: 8px;
  }

  .rr-btns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 10px;
  }

  .rr-mode-btn {
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 12px;
    padding: 14px 10px;
    cursor: pointer;
    color: #fff;
    font-size: 22px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    transition: background .2s;
  }

  .rr-mode-btn span {
    font-size: 12px;
    color: #aaa;
  }

  .rr-mode-btn:hover {
    background: rgba(255, 255, 255, .12);
  }

  /* ═══════════════════════════════════════════════════════════════
   SMART CHANNEL
═══════════════════════════════════════════════════════════════ */
  .sc-panel {
    position: fixed;
    top: 70px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(18, 18, 32, .95);
    border: 2px solid #888;
    border-radius: 12px;
    padding: 10px 14px;
    z-index: 850;
    max-width: 340px;
    width: 90%;
    display: none;
    align-items: center;
    gap: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .5);
  }

  .sc-msg {
    flex: 1;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
  }

  .sc-close {
    background: none;
    border: none;
    color: #aaa;
    font-size: 16px;
    cursor: pointer;
    padding: 0 4px;
    flex-shrink: 0;
  }

  .sc-score {
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 10px;
    text-align: center;
  }

  .sc-score-good {
    background: rgba(105, 240, 174, .1);
    color: #69f0ae;
  }

  .sc-score-caution {
    background: rgba(255, 152, 0, .1);
    color: #ff9800;
  }

  .sc-score-warn {
    background: rgba(255, 82, 82, .1);
    color: #ff5252;
  }

  .sc-score-bad {
    background: rgba(198, 40, 40, .2);
    color: #ff1744;
  }

  .sc-conditions {
    margin-bottom: 10px;
  }

  .sc-cond {
    font-size: 13px;
    color: #aaa;
    margin-bottom: 4px;
  }

  .sc-danger {
    font-size: 12px;
    color: #ff9800;
    padding-left: 10px;
  }

  .sc-rules-title {
    font-size: 11px;
    font-weight: 700;
    color: #888;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 6px;
  }

  .sc-rule-row {
    font-size: 13px;
    padding: 6px 10px;
    border-radius: 8px;
    margin-bottom: 4px;
  }

  .sc-rule-critique {
    background: rgba(198, 40, 40, .15);
    color: #ff5252;
  }

  .sc-rule-eleve {
    background: rgba(230, 81, 0, .12);
    color: #ff9800;
  }

  .sc-rule-modere {
    background: rgba(249, 168, 37, .1);
    color: #ffc107;
  }

  .sc-rule-info {
    background: rgba(105, 240, 174, .1);
    color: #69f0ae;
  }

  /* ═══════════════════════════════════════════════════════════════
   TRAIL FOG — BROUILLARD DE GUERRE                      Round 7
═══════════════════════════════════════════════════════════════ */
  .trail-fog-canvas {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 400;
    mix-blend-mode: multiply;
  }

  .fog-stats-badge {
    background: rgba(255, 255, 255, .07);
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 13px;
    color: #80cbc4;
    text-align: center;
    margin-bottom: 12px;
  }

  .btn-secondary {
    width: 100%;
    padding: 10px;
    margin-top: 6px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .15);
    color: #ccc;
    border-radius: 10px;
    font-size: 14px;
    cursor: pointer;
    transition: background .2s;
  }

  .btn-secondary:hover {
    background: rgba(255, 255, 255, .14);
  }

  /* ═══════════════════════════════════════════════════════════════
   CHALLENGE — DÉFIS & GAMIFICATION                      Round 7
═══════════════════════════════════════════════════════════════ */
  .ch-header-stats {
    display: flex;
    gap: 12px;
    margin-bottom: 14px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, .05);
    border-radius: 12px;
  }

  .ch-pts {
    flex: 1;
    text-align: center;
  }

  .ch-pts-label {
    display: block;
    font-size: 11px;
    color: #80cbc4;
    margin-bottom: 3px;
  }

  .ch-pts span {
    font-size: 16px;
    font-weight: 800;
    color: #69f0ae;
  }

  .challenge-list {
    max-height: 60vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .ch-category {
    margin-bottom: 6px;
  }

  .ch-cat-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #80cbc4;
    margin-bottom: 6px;
    padding-left: 2px;
  }

  .ch-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: rgba(255, 255, 255, .04);
    border-radius: 12px;
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, .07);
    transition: background .15s;
  }

  .ch-card.ch-done {
    background: rgba(105, 240, 174, .06);
    border-color: rgba(105, 240, 174, .2);
  }

  .ch-card-left {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    flex: 1;
    min-width: 0;
  }

  .ch-icon {
    font-size: 24px;
    flex-shrink: 0;
  }

  .ch-body {
    flex: 1;
    min-width: 0;
  }

  .ch-title {
    font-weight: 700;
    font-size: 13px;
    color: #e8f5e9;
    margin-bottom: 2px;
  }

  .ch-desc {
    font-size: 11px;
    color: #80cbc4;
    line-height: 1.4;
    margin-bottom: 5px;
  }

  .ch-progress-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
  }

  .ch-bar-bg {
    flex: 1;
    height: 5px;
    background: rgba(255, 255, 255, .1);
    border-radius: 3px;
    overflow: hidden;
  }

  .ch-bar-fill {
    height: 100%;
    background: #52b788;
    border-radius: 3px;
    transition: width .4s ease;
  }

  .ch-prog-txt {
    font-size: 10px;
    color: #80cbc4;
    white-space: nowrap;
  }

  .ch-completed-txt {
    font-size: 11px;
    color: #69f0ae;
    font-weight: 700;
  }

  .ch-pts-badge {
    background: rgba(255, 255, 255, .08);
    border-radius: 8px;
    padding: 4px 8px;
    font-size: 11px;
    font-weight: 700;
    color: #aaa;
    flex-shrink: 0;
    white-space: nowrap;
  }

  .ch-pts-done {
    background: rgba(105, 240, 174, .15);
    color: #69f0ae;
  }

  .challenge-toast {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
  }

  /* ═══════════════════════════════════════════════════════════════
   AMBIENT SOUND                                         Round 7
═══════════════════════════════════════════════════════════════ */
  .ambient-status-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    padding: 6px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
  }

  .ambient-volume {
    margin: 12px 0;
  }

  .ambient-intensity-btn {
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .12);
    color: #ccc;
    border-radius: 10px;
    padding: 8px 6px;
    font-size: 12px;
    cursor: pointer;
    transition: background .15s;
  }

  .ambient-intensity-btn:hover {
    background: rgba(82, 183, 136, .2);
    color: #fff;
  }

  /* ═══════════════════════════════════════════════════════════════
   POI AR — RÉALITÉ AUGMENTÉE                            Round 7
═══════════════════════════════════════════════════════════════ */
  .ar-overlay {
    position: fixed;
    inset: 0;
    z-index: 5000;
    background: rgba(0, 0, 0, .82);
    display: flex;
    flex-direction: column;
  }

  .ar-overlay.hidden {
    display: none;
  }

  .ar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    background: rgba(0, 0, 0, .5);
    backdrop-filter: blur(8px);
  }

  .ar-title {
    font-size: 16px;
    font-weight: 700;
    color: #69f0ae;
  }

  .ar-close {
    background: rgba(255, 255, 255, .12);
    border: none;
    color: #fff;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 16px;
    cursor: pointer;
  }

  .ar-canvas {
    flex: 1;
    width: 100%;
    display: block;
  }

  .ar-compass-ring {
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(0, 0, 0, .6);
    border: 2px solid rgba(105, 240, 174, .4);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .ar-needle {
    font-size: 22px;
    color: #ff5252;
    transition: transform .1s linear;
  }

  .ar-hint {
    position: absolute;
    bottom: 16px;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 12px;
    color: rgba(255, 255, 255, .5);
  }

  /* ═══════════════════════════════════════════════════════════════
   DÉBIT HISTORY — Historique & Prédiction                Round 7
═══════════════════════════════════════════════════════════════ */
  .dh-chart-wrap {
    position: relative;
    width: 100%;
    height: 180px;
    margin-bottom: 12px;
  }

  .dh-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 11px;
  }

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

  .dh-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
  }

  .dh-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 12px;
  }

  .dh-stat {
    background: rgba(255, 255, 255, .05);
    border-radius: 10px;
    padding: 10px;
    text-align: center;
  }

  .dh-stat-label {
    display: block;
    font-size: 11px;
    color: #888;
    margin-bottom: 4px;
  }

  .dh-stat-val {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
  }

  .dh-predict-title {
    font-size: 12px;
    font-weight: 700;
    color: #aaa;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin: 10px 0 6px;
  }

  .dh-predict-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: rgba(255, 255, 255, .05);
    border-radius: 8px;
    margin-bottom: 6px;
    font-size: 13px;
  }

  .dh-predict-date {
    flex: 1;
    color: #aaa;
  }

  .dh-predict-val {
    font-weight: 700;
    color: #fff;
  }

  .dh-predict-badge {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 600;
  }

  /* ═══════════════════════════════════════════════════════════════
   WATER QUALITY — Température & Qualité                   Round 7
═══════════════════════════════════════════════════════════════ */
  .wq-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(33, 150, 243, .12);
    border: 1px solid rgba(33, 150, 243, .25);
    border-radius: 10px;
    padding: 8px 12px;
    margin-bottom: 12px;
    font-size: 13px;
    cursor: pointer;
  }

  .wq-temp-big {
    font-size: 36px;
    font-weight: 800;
    text-align: center;
    color: #2196f3;
    margin: 10px 0;
  }

  .wq-qualite {
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 12px;
  }

  .wq-guide {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 10px;
  }

  .wq-guide-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 12px;
  }

  .wq-guide-range {
    font-weight: 700;
    min-width: 60px;
    color: #fff;
  }

  .wq-guide-label {
    color: #ccc;
  }

  .wq-source {
    font-size: 11px;
    color: #666;
    text-align: right;
    margin-top: 8px;
  }

  /* ═══════════════════════════════════════════════════════════════
   SUPPLY POINTS — Ravitaillement                          Round 7
═══════════════════════════════════════════════════════════════ */
  .sp-marker {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .4);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .4);
    cursor: pointer;
  }

  .sp-popup strong {
    display: block;
    font-size: 14px;
    margin-bottom: 3px;
  }

  .sp-popup .sp-type {
    display: block;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 4px;
  }

  .sp-popup p {
    margin: 4px 0;
    font-size: 12px;
  }

  .sp-popup span,
  .sp-popup a {
    display: block;
    font-size: 12px;
    color: #aaa;
    margin-top: 2px;
  }

  .sp-section {
    margin-bottom: 14px;
  }

  .sp-section-title {
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 4px;
  }

  .sp-row {
    display: flex;
    flex-direction: column;
    padding: 8px 10px;
    background: rgba(255, 255, 255, .05);
    border-radius: 8px;
    margin-bottom: 5px;
    cursor: pointer;
    font-size: 13px;
  }

  .sp-row strong {
    color: #fff;
  }

  .sp-hours,
  .sp-desc {
    font-size: 11px;
    color: #888;
    margin-top: 2px;
  }

  /* ═══════════════════════════════════════════════════════════════
   BIVOUAC — Zones de bivouac                              Round 7
═══════════════════════════════════════════════════════════════ */
  .biv-marker {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .4);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .4);
    cursor: pointer;
  }

  .biv-popup {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 13px;
    min-width: 160px;
  }

  .biv-popup strong {
    font-size: 14px;
    margin-bottom: 2px;
  }

  .biv-popup .biv-type {
    font-size: 12px;
    font-weight: 600;
  }

  .biv-popup p {
    margin: 2px 0;
    font-size: 12px;
    color: #555;
  }

  .biv-popup span {
    font-size: 12px;
    color: #777;
  }

  .biv-card {
    background: rgba(255, 255, 255, .05);
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: background .2s;
  }

  .biv-card:hover {
    background: rgba(255, 255, 255, .09);
  }

  .biv-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
  }

  .biv-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
  }

  .biv-card-header > div {
    flex: 1;
  }

  .biv-card-header strong {
    display: block;
    font-size: 14px;
  }

  .biv-type-label {
    font-size: 12px;
    font-weight: 600;
  }

  .biv-gratuit {
    font-size: 12px;
    padding: 3px 8px;
    border-radius: 10px;
    font-weight: 600;
    white-space: nowrap;
  }

  .biv-gratuit.gratuit {
    background: rgba(105, 240, 174, .15);
    color: #69f0ae;
  }

  .biv-gratuit.payant {
    background: rgba(255, 152, 0, .15);
    color: #ff9800;
  }

  .biv-desc {
    font-size: 12px;
    color: #aaa;
    margin-bottom: 6px;
  }

  .biv-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 11px;
    color: #888;
  }

  /* ═══════════════════════════════════════════════════════════════
   LIVECAM — Caméras en direct                             Round 7
═══════════════════════════════════════════════════════════════ */
  .cam-marker {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(0, 0, 0, .75);
    border: 2px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .4);
    cursor: pointer;
  }

  .cam-modal-content {
    padding: 0 !important;
  }

  .cam-modal-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
  }

  #cam-title {
    flex: 1;
    font-size: 15px;
    font-weight: 700;
  }

  .cam-refresh {
    font-size: 11px;
    color: #888;
  }

  .cam-viewer {
    width: 100%;
    min-height: 180px;
    max-height: 260px;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }

  .cam-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
  }

  .cam-iframe {
    width: 100%;
    height: 240px;
    border: none;
    display: block;
  }

  #cam-location {
    padding: 8px 16px;
    border-top: 1px solid rgba(255, 255, 255, .08);
  }

  .cam-list-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 4px;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
    cursor: pointer;
  }

  .cam-list-row:hover {
    background: rgba(255, 255, 255, .04);
    border-radius: 8px;
  }

  .cam-list-icon {
    font-size: 22px;
    flex-shrink: 0;
  }

  .cam-list-info {
    flex: 1;
  }

  .cam-list-info strong {
    display: block;
    font-size: 13px;
  }

  .cam-list-info span {
    font-size: 11px;
    color: #888;
  }

  .cam-list-type {
    font-size: 11px;
    color: #aaa;
    background: rgba(255, 255, 255, .07);
    padding: 2px 8px;
    border-radius: 8px;
  }

  /* ═══════════════════════════════════════════════════════════════
   NAVETTE — Navette intelligente de retour                Round 7
═══════════════════════════════════════════════════════════════ */
  .nav-eta-box {
    background: rgba(255, 255, 255, .05);
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 12px;
  }

  .nav-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 0;
    font-size: 13px;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
  }

  .nav-row:last-child {
    border-bottom: none;
  }

  .nav-row span {
    color: #aaa;
  }

  .nav-row strong {
    color: #fff;
  }

  .nav-recommended {
    background: rgba(82, 183, 136, .1);
    border: 1px solid rgba(82, 183, 136, .25);
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 12px;
  }

  .nav-rec-title {
    font-size: 14px;
    font-weight: 700;
    color: #52b788;
    margin-bottom: 8px;
  }

  .nav-rec-depart {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 4px;
  }

  .nav-rec-wait {
    font-size: 12px;
    color: #aaa;
    margin-bottom: 4px;
  }

  .nav-rec-desc {
    font-size: 12px;
    color: #ccc;
    margin-bottom: 6px;
  }

  .nav-rec-prix {
    font-size: 13px;
    font-weight: 600;
    color: #69f0ae;
  }

  .nav-date-section {
    margin-bottom: 10px;
  }

  .nav-date-section label {
    display: block;
    font-size: 12px;
    color: #888;
    margin-bottom: 4px;
  }

  .nav-all-title {
    font-size: 12px;
    font-weight: 700;
    color: #888;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin: 12px 0 6px;
  }

  .nav-slot {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, .05);
    border-radius: 10px;
    margin-bottom: 6px;
    cursor: pointer;
    font-size: 13px;
    transition: background .15s;
  }

  .nav-slot:hover {
    background: rgba(255, 255, 255, .1);
  }

  .nav-slot-active {
    background: rgba(82, 183, 136, .15) !important;
    border: 1px solid rgba(82, 183, 136, .3);
  }

  .nav-slot-time {
    font-weight: 700;
    font-size: 15px;
    min-width: 40px;
  }

  .nav-slot-desc {
    flex: 1;
    color: #aaa;
    font-size: 12px;
  }

  .nav-slot-prix {
    font-weight: 600;
    color: #69f0ae;
  }

  .nav-booking-form {
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 12px;
    padding: 14px;
    margin-top: 12px;
  }

  .nav-booking-title {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 12px;
  }

}