/* ---------------- Adaptations mobile uniquement (≤768px) ----------------
   Chargé en dernier (voir STYLE_ASSETS, backend/main.py) pour prendre le
   dessus sur les autres feuilles de style sans avoir besoin de !important.
   Rien ici ne s'applique au-dessus de 768px : le rendu desktop est intact. */

@media (max-width: 768px) {
  /* ---- barre du haut : passe sur deux lignes plutôt que de déborder
     (recherche pleine largeur en dessous) ---- */
  #topbar {
    flex-wrap: wrap;
    align-content: flex-start;
    height: auto;
    min-height: 56px;
    padding: 8px 10px;
    gap: 6px;
  }

  /* #workspace (index/sortie/proposition) a une barre de recherche qui
     passe sur sa propre ligne (voir #search-box plus bas) : la topbar y
     fait ~104px sur deux lignes. Les autres pages n'ont pas de recherche,
     la topbar y reste sur une seule ligne (~56px, voir min-height plus
     haut) — un décalage de 104px y laisserait un vide inutile en haut. */
  #workspace {
    top: 104px;
  }

  #confidentialite-main,
  #parcours-main {
    top: 56px;
  }

  /* Le formulaire d'inscription (pseudo/prénom/nom/âge/code/email/mdp) est
     plus haut que l'écran sur mobile : le centrage vertical (align-items:
     center, voir login.css) poussait alors le haut du panneau sous la
     topbar au lieu de le rendre accessible par défilement. Aligné en haut
     avec un peu d'air, et rendu défilable. */
  #login-main {
    top: 56px;
    align-items: flex-start;
    overflow-y: auto;
    padding: 20px 16px;
  }

  #search-box {
    order: 3;
    flex-basis: 100%;
    max-width: none;
  }

  .nav-chip {
    display: none;
  }

  .nav-brand .nav-name {
    font-size: 13.5px;
  }

  .nav-mark {
    width: 26px;
    height: 26px;
  }

  .nav-sport-toggle {
    padding: 5px 9px;
    font-size: 11px;
    gap: 3px;
  }

  /* Menu "≡" : cache le bouton sur desktop (voir nav.js, toujours dans le
     DOM), ne l'affiche qu'ici. */
  .nav-menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 8px;
    background: var(--surface-2);
    color: var(--ink-2);
    cursor: pointer;
    flex-shrink: 0;
    padding: 0;
  }

  .nav-menu-toggle:hover {
    background: var(--pine-wash);
    color: var(--pine);
  }

  /* Liens (Planificateur/Mes parcours créés/Proposition) : repliés dans un
     panneau déroulant déclenché par .nav-menu-toggle, même principe que
     .nav-sport-menu juste à côté. */
  #app-nav nav {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 10px;
    right: 10px;
    z-index: 200;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 8px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: var(--shadow-md);
    overflow-x: visible;
  }

  #app-nav nav.open {
    display: flex;
  }

  .nav-link {
    padding: 11px 12px;
    font-size: 14px;
  }

  /* Zone compte : garde l'essentiel, moins de texte à caser. */
  .nav-auth {
    gap: 6px;
  }

  .nav-auth-email,
  .nav-auth-login {
    font-size: 12px;
    max-width: 72px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .nav-auth-logout {
    padding: 5px 9px;
    font-size: 11.5px;
  }

  /* ---- boutons de mode (Équilibré/Gravel/...) : plus compacts ---- */
  .modes {
    gap: 5px;
  }

  .mode {
    padding: 6px 3px 5px;
    border-radius: 8px;
  }

  .mode .glyph {
    font-size: 13px;
  }

  .mode .label {
    font-size: 10px;
    margin-top: 2px;
  }

  .mode .sub {
    font-size: 8.5px;
  }

  /* ---- boutons/actions généraux : plus denses ---- */
  .btn-primary,
  .btn-ghost {
    padding: 9px;
    font-size: 13px;
  }

  .dropdown-trigger {
    padding: 9px 11px;
    font-size: 13px;
  }

  #sidebar-toggle {
    width: 34px;
    height: 34px;
    font-size: 13px;
  }

  #sidebar h1 {
    font-size: 17px;
  }

  .summary-top .big {
    font-size: 36px;
  }

  /* ---- panneau du bas : plus petit par défaut (moins de place prise) ----
     Remplace le 52dvh de style-lists.css (@media 900px, chargé avant) par
     une hauteur plus modeste — le panneau reste scrollable pour accéder au
     reste (rail-scroll a déjà overflow-y:auto). */
  #sidebar {
    height: 24dvh;
    padding: 10px;
    transition: height 0.18s ease;
  }

  /* Repliée (bouton "‹" en haut du panneau) : le comportement desktop
     (rail étroit en largeur) ne veut rien dire pour un panneau ancré en bas
     — ici, replier le fait glisser vers le bas jusqu'à ne plus laisser
     qu'une languette avec le bouton pour le rouvrir. */
  #sidebar.collapsed {
    height: 44px;
    width: auto;
    padding: 6px 10px;
  }

  #sidebar.collapsed .rail-scroll {
    display: none;
  }

  #sidebar.collapsed #sidebar-toggle {
    position: static;
    margin: 0 auto;
  }

  /* La barre de stats (.route-panel) suit le même repli — sans ça elle
     resterait plaquée à mi-écran, coupée de tout repère, une fois le
     panneau réduit. */
  #sidebar.collapsed ~ .canvas .route-panel,
  body:has(#sidebar.collapsed) .route-panel {
    bottom: calc(44px + 20px);
  }

  .rail-scroll {
    gap: 8px;
  }

  .hint {
    font-size: 0.74rem;
    line-height: 1.35;
  }

  .group-head {
    margin-bottom: 5px;
  }

  .group-head h2 {
    font-size: 10.5px;
  }

  /* La barre de stats (distance/dénivelé/durée) partageait le même point
     d'ancrage bas que #sidebar (bottom:24px vs bottom:12px) : elle se
     superposait au panneau au lieu de rester au-dessus. Recalée pile
     au-dessus du panneau (voir hauteur #sidebar plus haut, 24dvh). */
  .route-panel {
    bottom: calc(24dvh + 24px);
  }

  /* overflow-x:hidden (pas auto) : le défilement caché faisait "disparaître"
     la dernière carte (Difficulté) selon la position de scroll au moment du
     rendu, donnant l'impression que la barre bougeait toute seule. On
     retire carrément cette carte plutôt que de la rendre accessible par un
     scroll peu visible sur une barre aussi fine. */
  #stats {
    gap: 6px;
    padding: 8px 10px;
    overflow-x: hidden;
  }

  .stat-card:nth-child(5) {
    display: none;
  }

  .stat-card + .stat-card {
    padding-left: 6px;
  }

  .stat-value {
    font-size: 13.5px;
  }

  .stat-label {
    font-size: 8.5px;
  }

  /* ---- onglet "Carte" (fonds de carte/calques) : plein écran en hauteur
     par défaut (top:16px;bottom:16px) — trop grand une fois déplié sur
     petit écran, réduit à une hauteur limitée en haut à droite. */
  .map-layers-panel {
    top: 60px;
    bottom: auto;
    right: 10px;
    width: min(240px, calc(100vw - 20px));
    max-height: 50dvh;
  }

  .map-layers-panel-header {
    padding: 10px 12px;
  }

  .map-layers-panel-body {
    padding: 8px 12px 12px;
  }
}