/* MCD Roadbook -- presentation "comme l'app iPhone" sur telephone
   (moins de 861 px de large) : carte en plein ecran, boutons ronds alignes,
   barre "Ou allons-nous ?" en bas qui ouvre le panneau (avec la section
   "Communaute"). Fichier ADDITIF (voir mobile-home.js) ; sur ordinateur
   rien ne change. Version 3 : tous les boutons ronds alignes en colonne en
   haut a droite (carte et guidage). */

#mcd-mh-bar, #mcd-mh-backdrop, #mcd-mh-back, .mcd-mh-head, .mcd-mh-community {
  display: none;
}

@media (max-width: 860px) {
  :root { --mh-safe-top: env(safe-area-inset-top, 0px); --mh-safe-bottom: env(safe-area-inset-bottom, 0px); --mh-blue: #1f6fd1;
    --mh-s0: calc(var(--mh-safe-top) + 12px); --mh-s1: calc(var(--mh-safe-top) + 80px); --mh-s2: calc(var(--mh-safe-top) + 148px);
    --mh-s3: calc(var(--mh-safe-top) + 216px); --mh-s4: calc(var(--mh-safe-top) + 284px); --mh-s5: calc(var(--mh-safe-top) + 352px); }
  .app-shell { height: 100vh; height: 100dvh; }
  .map-pane { min-height: 0 !important; }
  .top-nav { display: none !important; }

  /* ---- Boutons ronds de la carte, colonne de droite ---- */
  .leaflet-control-zoom { display: none !important; }
  .leaflet-top.leaflet-right { margin-top: calc(var(--mh-safe-top) + 2px); }
  .leaflet-top.leaflet-right .leaflet-control-layers {
    margin: 10px 12px 0 0 !important;
    border: none !important;
    border-radius: 50% !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28) !important;
  }
  .leaflet-control-layers-expanded { border-radius: 14px !important; }
  .leaflet-control-layers:not(.leaflet-control-layers-expanded) .leaflet-control-layers-toggle {
    width: 56px !important; height: 56px !important;
    border-radius: 50%;
    background-size: 28px 28px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-color: #fff !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231f6fd1'%3E%3Cpath d='M12 2.6 2.4 7.8 12 13l9.6-5.2z'/%3E%3Cpath d='m4.6 11.2-2.2 1.2L12 17.6l9.6-5.2-2.2-1.2L12 15.2z' opacity='.85'/%3E%3Cpath d='m4.6 15.4-2.2 1.2L12 21.8l9.6-5.2-2.2-1.2L12 19.4z' opacity='.7'/%3E%3C/svg%3E") !important;
  }

  .geo-toggle-btn, .record-toggle-btn, #mcd-radar-toggle-btn, #nav-guidance-photo-btn, #nav-guidance-recenter-btn {
    position: fixed !important;
    right: 12px !important;
    left: auto !important;
    bottom: auto !important;
    width: 56px !important; height: 56px !important;
    min-width: 0 !important; min-height: 0 !important;
    margin: 0 !important; padding: 0 !important;
    border: none !important;
    border-radius: 50% !important;
    background: #fff !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28) !important;
    font-size: 0 !important; color: transparent !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 26px 26px !important;
    z-index: 1000 !important;
    transform: none !important;
  }
  .geo-toggle-btn { top: var(--mh-s1) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231f6fd1'%3E%3Cpath d='M21.3 2.7 2.9 10.4c-.8.4-.7 1.5.1 1.7l7.3 1.6 1.6 7.3c.2.8 1.3.9 1.7.1z'/%3E%3C/svg%3E") !important; }
  .geo-toggle-btn.active { background-color: var(--mh-blue) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M21.3 2.7 2.9 10.4c-.8.4-.7 1.5.1 1.7l7.3 1.6 1.6 7.3c.2.8 1.3.9 1.7.1z'/%3E%3C/svg%3E") !important; }
  #mcd-radar-toggle-btn { top: var(--mh-s2) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f6fd1' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3.5 17a8.5 8.5 0 1 1 17 0'/%3E%3Cpath d='M12 17l4.2-5.2'/%3E%3Ccircle cx='12' cy='17' r='1.4' fill='%231f6fd1'/%3E%3Cpath d='M6.2 12.3l1.3.8M12 6.9v1.5M17.8 12.3l-1.3.8'/%3E%3C/svg%3E") !important; }
  #mcd-radar-toggle-btn.mcd-radar-btn-on { background-color: var(--mh-blue) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3.5 17a8.5 8.5 0 1 1 17 0'/%3E%3Cpath d='M12 17l4.2-5.2'/%3E%3Ccircle cx='12' cy='17' r='1.4' fill='%23fff'/%3E%3Cpath d='M6.2 12.3l1.3.8M12 6.9v1.5M17.8 12.3l-1.3.8'/%3E%3C/svg%3E") !important; }
  #mcd-radar-toggle-btn * { display: none !important; }
  .mcd-radar-control { border: none !important; background: none !important; box-shadow: none !important; }
  .record-toggle-btn { top: var(--mh-s3) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='8.5' fill='none' stroke='%23dc2626' stroke-width='2'/%3E%3Ccircle cx='12' cy='12' r='5' fill='%23dc2626'/%3E%3C/svg%3E") !important; }
  .record-toggle-btn.active { background-color: #dc2626 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='7' y='7' width='10' height='10' rx='1.5' fill='%23fff'/%3E%3C/svg%3E") !important; }
  .ride-live-bar { top: calc(var(--mh-safe-top) + 12px) !important; }
  /* Guidage : photo et recentrer, dans la meme colonne. */
  #nav-guidance-photo-btn { top: var(--mh-s2) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f6fd1' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M4 8h3l1.6-2.4h6.8L17 8h3v11H4z'/%3E%3Ccircle cx='12' cy='13.2' r='3.4'/%3E%3C/svg%3E") !important; }
  #nav-guidance-recenter-btn { top: var(--mh-s5) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f6fd1' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='6.5'/%3E%3Ccircle cx='12' cy='12' r='2' fill='%231f6fd1'/%3E%3Cpath d='M12 2.5v3M12 18.5v3M2.5 12h3M18.5 12h3'/%3E%3C/svg%3E") !important; }
  /* Pendant le guidage : radars juste sous les calques. */
  body.nav-guidance-fullscreen #mcd-radar-toggle-btn { top: var(--mh-s1) !important; }

  /* ---- Colonne de gauche : signalement (orange) et sortie en groupe ---- */
  .mcd-closure-fab {
    top: var(--mh-s4) !important; bottom: auto !important;
    right: 12px !important; left: auto !important;
    transform: none !important;
    background: #f0923a !important;
    color: #fff !important;
  }
  .mcd-closure-fab:active { transform: scale(0.94) !important; }
  .mcd-closure-fab.mcd-fab-success { background: #22c55e !important; }
  .mcd-closure-fab.mcd-fab-error { background: #ef4444 !important; }
  .mcd-closure-fab:not(.mcd-fab-success):not(.mcd-fab-error):not(.mcd-fab-busy) {
    font-size: 0 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10.3 3.6 1.9 18.2c-.8 1.3.2 2.9 1.7 2.9h16.8c1.5 0 2.5-1.6 1.7-2.9L13.7 3.6c-.8-1.3-2.6-1.3-3.4 0z' fill='%23fff'/%3E%3Crect x='11' y='8.6' width='2' height='6.4' rx='1' fill='%23f0923a'/%3E%3Ccircle cx='12' cy='17.7' r='1.25' fill='%23f0923a'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important; background-position: center !important; background-size: 28px 28px !important;
  }
  .mcd-closure-fab:not(.mcd-fab-success):not(.mcd-fab-error):not(.mcd-fab-busy) * { display: none !important; }
  /* Sortie en groupe : sur la carte seulement pendant une sortie (sinon dans le panneau). */
  #mcd-group-fab:not(.mcd-group-fab-on) { display: none !important; }
  body.nav-guidance-fullscreen #mcd-group-fab { top: var(--mh-s4) !important; }
  body.nav-guidance-fullscreen .mcd-closure-fab { top: var(--mh-s3) !important; }
  #mcd-group-fab {
    top: var(--mh-s5) !important; bottom: auto !important;
    right: 12px !important; left: auto !important;
    width: 56px !important; height: 56px !important;
  }

  /* ---- Barre du bas ---- */
  body.mcd-mh-planner #mcd-mh-bar {
    display: flex;
    position: fixed;
    left: 12px; right: 12px;
    bottom: calc(var(--mh-safe-bottom) + 14px);
    z-index: 4960;
    min-height: 56px;
    align-items: center;
    padding: 8px 20px;
    border: none;
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.96);
    color: var(--mh-blue);
    font-size: 19px; font-weight: 700; text-align: left;
    box-shadow: 0 3px 14px rgba(0, 0, 0, 0.25);
    cursor: pointer;
  }
  #mcd-mh-bar .mcd-mh-bar-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #mcd-mh-bar .mcd-mh-bar-sub { display: block; font-size: 13px; font-weight: 600; color: #4b5563; }
  #nav-guidance-start-btn {
    right: 12px !important;
    bottom: calc(var(--mh-safe-bottom) + 82px) !important;
  }

  /* ---- Panneau (comme la feuille de l'app) ---- */
  .sidebar {
    position: fixed !important;
    left: 8px; right: 8px;
    bottom: calc(var(--mh-safe-bottom) + 8px);
    top: calc(var(--mh-safe-top) + 18vh);
    width: auto !important; min-width: 0 !important; max-height: none !important;
    z-index: 4980;
    border: none !important;
    border-radius: 28px;
    background: #f2f4f7 !important;
    box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.3);
    padding-top: 0 !important;
    padding-bottom: 24px !important;
    transform: translateY(110%);
    transition: transform 0.25s ease;
    -webkit-overflow-scrolling: touch;
  }
  body.mcd-mh-sheet-open .sidebar { transform: none; }
  .sidebar > .sidebar-header, .sidebar > .account-bar { display: none !important; }
  #mcd-mh-backdrop { position: fixed; inset: 0; z-index: 4979; background: rgba(0, 0, 0, 0.18); }
  body.mcd-mh-sheet-open #mcd-mh-backdrop { display: block; }

  .sidebar > .mcd-mh-head {
    display: flex;
    position: sticky; top: 0; z-index: 5;
    align-items: center; gap: 8px;
    margin: 0 -16px; padding: 18px 14px 10px;
    background: #f2f4f7;
  }
  .mcd-mh-head::before {
    content: ''; position: absolute; top: 7px; left: 50%; transform: translateX(-50%);
    width: 40px; height: 5px; border-radius: 3px; background: #c4c9d1;
  }
  .mcd-mh-pill {
    appearance: none; border: 1px solid #e3e6eb; background: #fff; color: #111827;
    border-radius: 22px; padding: 10px 16px; font-size: 15px; font-weight: 600;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08); cursor: pointer; white-space: nowrap;
  }
  .mcd-mh-head-title { flex: 1; min-width: 0; text-align: center; font-size: 18px; font-weight: 800;
    color: #111827; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sidebar > .mcd-mh-community { display: block; }
  .mcd-mh-section-title { margin: 4px 4px 8px; font-size: 17px; font-weight: 700; color: #6b7280; }
  .mcd-mh-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
    background: #e8ebf0; border-radius: 18px; padding: 10px; }
  .mcd-mh-tile {
    appearance: none; display: flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 48px; padding: 8px 10px;
    border: 1.5px solid var(--mh-blue); border-radius: 12px; background: #fff;
    color: var(--mh-blue); font-size: 16px; font-weight: 600; cursor: pointer; text-align: center;
  }
  .mcd-mh-tile svg { width: 24px; height: 24px; flex-shrink: 0; }

  /* Page Aide : bouton de retour a la carte. */
  body.mcd-mh-help #mcd-mh-back {
    display: block; position: fixed; z-index: 4960;
    top: calc(var(--mh-safe-top) + 10px); left: 12px;
    appearance: none; border: none; border-radius: 22px; padding: 10px 16px;
    background: var(--mh-blue); color: #fff; font-size: 15px; font-weight: 700;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
  }
  body.mcd-mh-help .help-page { padding-top: calc(var(--mh-safe-top) + 56px); }

  /* Panneau ouvert ou guidage : les boutons de la carte se cachent. */
  body.mcd-mh-sheet-open #mcd-mh-bar,
  body.mcd-mh-sheet-open .mcd-closure-fab,
  body.mcd-mh-sheet-open #mcd-group-fab,
  body.mcd-mh-sheet-open #nav-guidance-start-btn,
  body.nav-guidance-fullscreen #mcd-mh-bar,
  body.nav-guidance-fullscreen #mcd-mh-backdrop,
  body.nav-guidance-fullscreen .geo-toggle-btn,
  body.nav-guidance-fullscreen .record-toggle-btn {
    display: none !important;
  }
  #approach-prompt, #track-save-prompt, #battery-reminder { z-index: 4970 !important; }
}