/* ==========================================================================
   JDM PWA — Bottom Navigation, Safe Areas & Ergonomie standalone  (_pwa.css)
   Tout est scopé sous @media (display-mode: standalone) :
   aucun impact sur la navigation navigateur normale.
   ========================================================================== */


/* ==========================================================================
   VARIABLES PWA
   ========================================================================== */
:root {
  --bottom-nav-h:     56px;
  --bottom-nav-total: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom));
  /* Top de référence pour les filtres sticky en PWA standalone */
  --pwa-sticky-top:   calc(var(--header-h, 70px) + env(safe-area-inset-top));
}


/* ==========================================================================
   0. TOUCH — s'applique partout (PWA et navigateur mobile)
   ========================================================================== */

/* Supprimer le flash gris/bleu natif au tap sur iOS et Android.
   Sans cette règle, chaque bouton/lien produit un highlight visible
   qui trahit l'interface web sous-jacente en mode app. */
* {
  -webkit-tap-highlight-color: transparent;
}

/* Améliorer la réactivité tactile sur les éléments interactifs */
a, button, [role="button"], label, .jdm-sec-btn, .jdm-acc-nav-item {
  touch-action: manipulation; /* supprime le délai 300ms de double-tap sur iOS < 13 */
  -webkit-touch-callout: none; /* désactive le menu contextuel au tap long sur iOS */
}

/* Scroll fluide natif sur les conteneurs scrollables */
/* Note : -webkit-overflow-scrolling est obsolete mais conserve pour iOS < 13 */
.kebab-panel,
.jdm-acc-content,
.jdm-modal-body {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* #main-content : overscroll-behavior uniquement sur iOS
   Sur Android Chrome, overscroll-behavior:contain sans overflow-y:auto bloque le scroll touch.
   On cible html.is-ios (classe posee par main.js) pour ne l'appliquer qu'a iOS. */
#main-content {
  -webkit-overflow-scrolling: touch;
}
html.is-ios #main-content {
  overscroll-behavior: contain;
}


/* ==========================================================================
   0b. HEADER PWA — titre de section centré, logo masqué
   ========================================================================== */

/* Masqué par défaut sur toutes les pages — visible uniquement en PWA standalone */
.pwa-header-title {
  display: none;
}

@media (display-mode: standalone) and (max-width: 767px) {

  /* Masquer le logo — remplacé par le titre de section */
  .site-logo {
    display: none !important;
  }

  /* Le titre s'insère dans le flux flex du header-inner */
  .pwa-header-title {
    display:        block                 !important;
    flex:           1                     !important;
    min-width:      0                     !important;
    text-align:     center                !important;
    font-family:    var(--font-display, sans-serif) !important;
    font-size:      16px                  !important;
    font-weight:    700                   !important;
    letter-spacing: 1.5px                 !important;
    text-transform: uppercase             !important;
    color:          #fff                  !important;
    white-space:    nowrap                !important;
    overflow:       hidden                !important;
    text-overflow:  ellipsis              !important;
    pointer-events: none                  !important;
    position:       static                !important;
    transform:      none                  !important;
  }

  /* Note : on ne masque plus l'élément quand il est vide via :empty,
     car JS (main.js) le remplit côté client au 1er lancement après
     réinstallation, avant que le cookie soit visible par PHP. */
}


/* ==========================================================================
   1. SAFE AREAS — Header & panneau kebab
   Nécessite viewport-fit=cover dans le <meta viewport> (header.php)
   ========================================================================== */

@media (display-mode: standalone) {

  /* Admin bar WordPress : cachée en standalone */
  #wpadminbar { display: none !important; }
  html        { margin-top: 0 !important; }
  body        { margin-top: 0 !important; background-color: rgba(8,14,22,1); }
  /* overscroll-behavior-y:none : bloque le pull-to-refresh.
     Sur iOS le rubber-band est gere par le fix body:fixed dans setup.php.
     Sur Android on garde le comportement natif. */
  html.is-ios { overscroll-behavior-y: none; }
  html.is-ios body { overscroll-behavior-y: none; }

  /* Header : absorbe l'inset supérieur (encoche / Dynamic Island) */
  .site-header {
    padding-top: env(safe-area-inset-top);
    height: calc(var(--header-h, 70px) + env(safe-area-inset-top));
  }

  /* Kebab panel : padding-top pour ne pas démarrer sous l'encoche */
  .kebab-panel {
    padding-top: env(safe-area-inset-top);
  }

  /* iPhone paysage : safe areas latérales */
  .site-header .header-inner {
    padding-left:  max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }
  .kebab-panel {
    padding-left: env(safe-area-inset-left);
  }
}


/* ==========================================================================
   2. BOTTOM NAV BAR — mobile standalone uniquement
   ========================================================================== */

@media (display-mode: standalone) and (max-width: 767px) {

  /* ── Forcer l'affichage ── */
  .jdm-section-nav { display: block !important; }

  /* ── Repositionner en bas ── */
  .jdm-section-nav {
    top:            auto            !important;
    bottom:         calc(-1 * env(safe-area-inset-bottom, 0px)) !important;
    height:         calc(var(--bottom-nav-total) + env(safe-area-inset-bottom, 0px)) !important;
    border-top:     1px solid rgba(255, 255, 255, .12) !important;
    border-bottom:  none            !important;
    padding-bottom: calc(env(safe-area-inset-bottom) * 2) !important;
    background:     rgba(8, 14, 22, 0.98) !important;
    box-shadow:     0 -4px 20px rgba(0, 0, 0, .35) !important;
  }
  /* Couvrir la safe-area-inset-bottom sous la nav */
  .jdm-section-nav::after {
    content: '';
    position: absolute;
    bottom: calc(-1 * env(safe-area-inset-bottom));
    left: 0; right: 0;
    height: env(safe-area-inset-bottom);
    background: rgba(8, 14, 22, 0.98);
  }

  /* ── Inner : répartition égale style tab bar native ── */
  .jdm-section-nav-inner {
    padding-inline:   4px          !important;
    padding-top:      6px          !important;
    justify-content:  space-around !important;
    overflow-x:       hidden       !important;
    gap:              0            !important;
    align-items:      flex-start   !important;
  }

  /* ── Boutons : style onglet natif ── */
  .jdm-section-nav .jdm-sec-btn {
    flex:           1           !important;
    max-width:      72px;
    width:          auto        !important;
    height:         auto        !important;
    flex-direction: column      !important;
    gap:            3px         !important;
    padding:        4px 2px     !important;
    border-radius: var(--radius)        !important;
    border:         none        !important;
    background:     transparent !important;
    opacity:        .6          !important;
  }

  .jdm-section-nav .jdm-sec-btn-ico {
    font-size:   24px !important;
    line-height: 1    !important;
  }

  /* ── Avatar photo dans le bouton Profil ── */
  .jdm-section-nav .jdm-sec-btn-avatar {
    width:         28px         !important;
    height:        28px         !important;
    border-radius: 50%          !important;
    object-fit:    cover        !important;
    border:        2px solid rgba(255,255,255,.25) !important;
    display:       block        !important;
    margin:        0 auto       !important;
  }
  /* Quand l'avatar est actif — bordure colorée */
  .jdm-section-nav .jdm-sec-btn--active .jdm-sec-btn-avatar {
    border-color: var(--p-color, #94a3b8) !important;
  }

  /* ── Initiale si pas de photo ── */
  .jdm-section-nav .jdm-sec-btn-initial {
    width:           28px              !important;
    height:          28px              !important;
    border-radius:   50%               !important;
    background:      rgba(100,116,139,.35) !important;
    border:          2px solid rgba(148,163,184,.4) !important;
    display:         flex              !important;
    align-items:     center            !important;
    justify-content: center            !important;
    font-size:       13px              !important;
    font-weight:     700               !important;
    color:           #94a3b8           !important;
    line-height:     1                 !important;
    margin:          0 auto            !important;
  }
  .jdm-section-nav .jdm-sec-btn--active .jdm-sec-btn-initial {
    background:   rgba(100,116,139,.55) !important;
    border-color: #94a3b8               !important;
    color:        #fff                  !important;
  }

  /* Labels visibles en bottom nav */
  .jdm-section-nav .jdm-sec-btn-lbl {
    display:        block     !important;
    font-size:      9px       !important;
    font-weight:    700       !important;
    letter-spacing: .3px      !important;
    text-transform: uppercase !important;
    color:          inherit   !important;
    opacity:        1         !important;
  }

  /* Item actif */
  .jdm-section-nav .jdm-sec-btn--active {
    opacity:       1 !important;
    background:    var(--p-bg, rgba(255,255,255,.08)) !important;
    border-radius: var(--radius) !important;
  }

  .jdm-section-nav .jdm-sec-btn:not(.jdm-sec-btn--active):hover {
    opacity:   .85          !important;
    filter:    brightness(1.2) !important;
    transform: none         !important;
  }

  /* ── Masquer la nav inline du header ── */
  .jdm-sec-inline { display: none !important; }

  /* ── Footer masqué ── */
  .site-footer { display: none !important; }

  /* ── Padding-bottom du contenu principal ── */
  #main-content { padding-bottom: calc(var(--bottom-nav-h, 56px) + env(safe-area-inset-bottom) + 8px) !important; }

  /* ── Décalage héros : reset de l'offset "barre-top" ── */
  body.has-section-nav .single-hero,
  body.has-section-nav .jdm-ann-hero {
    padding-top: calc(
      var(--header-h, 70px)
      + env(safe-area-inset-top)
      + var(--wp-admin--admin-bar--height, 0px)
      + 24px
    ) !important;
  }

  /* Annuaire : la search-bar est sticky, son top = juste sous le header PWA */
  body.has-section-nav .jdm-ann-search-bar,
  body .jdm-ann-search-bar {
    top: var(--pwa-sticky-top) !important;
  }
}


/* ==========================================================================
   3. BOUTON D'AIDE "?" — masqué en PWA standalone
   Le mu-plugin injecte "body.jdm-user-logged-in #jdm-help-btn { display:flex !important }"
   dans wp_footer à priority 50, après nos fichiers CSS enqueués.
   On le bat en spécificité pure en répétant la classe (CSS valide) :
   body.jdm-user-logged-in.jdm-user-logged-in → (0,2,1) > (0,1,1)
   ========================================================================== */

@media (display-mode: standalone) {
  body.jdm-user-logged-in.jdm-user-logged-in #jdm-help-btn,
  body.jdm-user-logged-in.jdm-user-logged-in #jdm-help-overlay,
  body.jdm-user-logged-in.jdm-user-logged-in #jdm-welcome-overlay,
  body.jdm-user-logged-in.jdm-user-logged-in #jdm-tour-backdrop,
  body.jdm-user-logged-in.jdm-user-logged-in #jdm-tour-frame,
  body.jdm-user-logged-in.jdm-user-logged-in #jdm-tour-bubble {
    display:        none   !important;
    visibility:     hidden !important;
    pointer-events: none   !important;
  }
}


/* ==========================================================================
   3b. BLOC ALERTES TÉLÉPHONE — visible uniquement sur mobile (PWA ou pas)
   Sur desktop le push n'a pas de sens (pas d'app installée, pas de SW actif).
   ========================================================================== */

@media (min-width: 768px) {
  /* Cacher le bloc d'abonnement push sur desktop, quelle que soit la détection */
  #jdm-push-block { display: none !important; }
}


/* ==========================================================================
   3c. ALIGNEMENT HEADER EN PWA — symétrie gauche/droite
   Gauche : kebab-btn 40px, bord visuel = padding-inline (16px)
   Droite  : user-menu-toggle a padding-right:12px → bord visuel décalé
   On compense avec margin-right négatif sur header-right pour égaliser.
   ========================================================================== */

@media (display-mode: standalone) {
  .site-header .header-right {
    /* Le user-menu-toggle a padding-right:12px — on recule de 12px pour
       que son bord visuel soit aligné avec le bord visuel du kebab à gauche */
    margin-right: -12px;
  }
}

/* ==========================================================================
   4. HERO HEADERS — masqués en PWA standalone
   ========================================================================== */

@media (display-mode: standalone) and (max-width: 767px) {

  .single-hero,
  .jdm-ann-hero {
    display: none !important;
  }

  /* Classe posée côté PHP via cookie jdm_pwa — masquage immédiat sans attendre le CSS */
  .pwa-hidden {
    display: none !important;
  }

  /* Compenser la disparition du hero : le contenu qui suit monte directement
     sous le header. On ajoute un padding-top à la première section de contenu. */
  body.has-section-nav .section:first-of-type,
  body.has-section-nav > #main-content > .section:first-child,
  body.has-section-nav > #main-content > section:first-child {
    padding-top: calc(
      var(--header-h, 70px)
      + env(safe-area-inset-top)
      + 16px
    ) !important;
  }

  /* Cas particulier : la .section suit directement un .page-bg (fond fixe),
     pas un hero — même traitement */
  .page-bg + .section,
  .page-bg + section {
    padding-top: calc(
      var(--header-h, 70px)
      + env(safe-area-inset-top)
      + 16px
    ) !important;
  }
}


/* ==========================================================================
   6. VIEW TRANSITIONS — désactivées
   Causaient un double rendu visible (ancienne page → nouvelle page)
   et empêchaient certains styles de s'appliquer correctement.
   ========================================================================== */

/* View transitions désactivées */

 — fixés sous le header en standalone
   Chaque page de section a ses propres contrôles de filtrage.
   En PWA, l'utilisateur scroll beaucoup : les filtres doivent rester
   accessibles sans remonter en haut de page.
   ========================================================================== */

@media (display-mode: standalone) and (max-width: 767px) {

  /* Tous les wrappers de filtres : sticky sous le header PWA.
     Le fond coloré semi-transparent vient de .filters-wrap dans _components.css.
     Ici on ne gère que le positionnement. */

  .actu-search,
  .filters-wrap,
  .jdm-ann-search-bar,
  #form-gpx-filters {
    position:      sticky             !important;
    top:           var(--pwa-sticky-top) !important;
    z-index:       800                !important;
    margin-top:    0                  !important;
    margin-bottom: 0                  !important;
    border-radius: var(--radius-lg, 14px) !important;
  }

  /* Espace sous les filtres collants */
  .tabs:has(.tab-btn[data-past]) + *,
  .actu-search + *,
  .filters-wrap + *,
  .jdm-ann-search-bar + *,
  #form-gpx-filters + * {
    padding-top: 12px !important;
  }

  /* ── Parcours : layout compact en PWA ──
     Les labels sont masqués, les selects s'affichent en grille 2 colonnes.
     Évite l'empilement vertical qui prend toute la hauteur. */
  #form-gpx-filters .jdm-filter-label {
    display: none !important;
  }
  #form-gpx-filters {
    display:        flex      !important;
    flex-direction: row       !important;
    flex-wrap:      wrap      !important;
    align-items:    center    !important;
    gap:            8px       !important;
  }
  #form-gpx-filters .jdm-field-group {
    flex:        1 1 calc(50% - 8px) !important;
    min-width:   0                   !important;
    display:     flex                !important;
    flex-direction: column           !important;
    align-self:  auto                !important;
  }
  /* Écraser les min-width inline sur les selects */
  #form-gpx-filters .jdm-btn-filter,
  #form-gpx-filters select {
    width:     100%   !important;
    min-width: 0      !important;
    font-size: 13px   !important;
  }
  /* Div boutons Rechercher/Réinitialiser : pleine largeur en bas */
  #form-gpx-filters > div[style*="margin-left:auto"],
  #form-gpx-filters > div:last-of-type {
    flex:        1 1 100%   !important;
    margin-left: 0          !important;
    display:     flex       !important;
    gap:         8px        !important;
  }
  /* Le span "Filtrer :" : pleine largeur sur sa propre ligne */
  #form-gpx-filters > span:first-of-type {
    flex:  1 1 100% !important;
    padding-bottom: 0 !important;
  }


/* ============================================================
   MODIFICATIONS PWA JDM — toutes scopées body.is-pwa
   (plus fiable que @media display-mode:standalone sur iOS)
   ============================================================ */

/* ── Bottom nav : hauteur, tap targets, couleurs ── */
body.is-pwa :root { --bottom-nav-h: 60px; }

body.is-pwa .jdm-section-nav .jdm-sec-btn {
  flex: 1 !important; max-width: 80px;
  min-height: 44px !important;
  padding: 6px 4px !important;
  color: rgba(148,163,184,.65) !important;
  opacity: 1 !important;
  will-change: transform;
  background: transparent !important; border: none !important;
  flex-direction: column !important; gap: 3px !important;
  border-radius: var(--radius) !important;
}
body.is-pwa .jdm-section-nav .jdm-sec-btn-ico {
  display: flex !important; align-items: center !important;
  justify-content: center !important; line-height: 1 !important;
  transition: color var(--transition) !important;
}
body.is-pwa .jdm-section-nav .jdm-sec-btn-ico svg {
  display: block !important; width: 22px !important; height: 22px !important;
}
body.is-pwa .jdm-section-nav .jdm-sec-btn-lbl {
  display: block !important; font-size: 10px !important;
  font-weight: 600 !important; text-transform: none !important;
  letter-spacing: .1px !important; color: inherit !important;
  opacity: 1 !important;
}
body.is-pwa .jdm-section-nav .jdm-sec-btn--active {
  color: var(--p-color, #94a3b8) !important;
  opacity: 1 !important;
  background: var(--p-bg, rgba(255,255,255,.08)) !important;
  border-radius: var(--radius) !important;
}
body.is-pwa .jdm-section-nav .jdm-sec-btn:not(.jdm-sec-btn--active):hover {
  color: rgba(255,255,255,.85) !important;
}

/* ── Animation entrée de page ── */
@keyframes jdm-page-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
body.is-pwa #main-content {
  animation: jdm-page-in .35s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@media (prefers-reduced-motion: reduce) {
  body.is-pwa #main-content { animation: none; }
}

/* ── Kebab : masquer items tabnav ── */
body.is-pwa .kebab-menu-list .kebab-tabnav { display: none !important; }
body.is-pwa .kebab-menu-list .kebab-section-label:first-child { display: none !important; }

/* ── PAGE SORTIES ── */

/* Filtres période : scroll horizontal */
body.is-pwa .filters-wrap .tabs {
  display: flex !important; flex-wrap: nowrap !important;
  overflow-x: auto !important; -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important; gap: 8px !important;
  margin-bottom: 10px !important;
}
body.is-pwa .filters-wrap .tabs::-webkit-scrollbar { display: none !important; }
body.is-pwa .filters-wrap .tab-btn {
  flex-shrink: 0 !important; padding: 9px 18px !important;
  font-size: 13px !important; white-space: nowrap !important;
}

/* Filtres type : scroll horizontal */
body.is-pwa .filters-wrap .planning-tabs {
  display: flex !important; flex-wrap: nowrap !important;
  overflow-x: auto !important; -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important; gap: 8px !important;
  margin-bottom: 10px !important;
}
body.is-pwa .filters-wrap .planning-tabs::-webkit-scrollbar { display: none !important; }
body.is-pwa .filters-wrap .ptab-btn {
  flex-shrink: 0 !important; padding: 9px 16px !important;
  font-size: 13px !important; white-space: nowrap !important;
}

/* Tri : segmented control */
body.is-pwa .jdm-sort-wrap {
  display: flex !important; align-items: center !important; gap: 10px !important;
}
body.is-pwa .jdm-sort-label {
  font-size: 13px !important; color: rgba(255,255,255,.55) !important;
  flex-shrink: 0 !important;
}
body.is-pwa .jdm-sort-control {
  display: flex !important; background: rgba(0,0,0,.28) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: var(--radius) !important; padding: 3px !important; gap: 2px !important;
}
body.is-pwa .jdm-sort-btn {
  padding: 7px 16px !important; border-radius: var(--radius-sm) !important;
  border: none !important; background: transparent !important;
  color: rgba(255,255,255,.5) !important; font-size: 13px !important;
  font-weight: 600 !important; cursor: pointer !important;
  font-family: var(--font) !important; white-space: nowrap !important;
  transition: background var(--transition-fast), color var(--transition-fast) !important;
}
body.is-pwa .jdm-sort-btn.active {
  background: rgba(111,207,66,.22) !important;
  color: var(--lime-accent) !important;
  border: 1px solid rgba(111,207,66,.45) !important;
}

/* Cards sorties : layout compact */
body.is-pwa .sorties-grid {
  grid-template-columns: 1fr !important; gap: 10px !important;
}
body.is-pwa .sortie-card {
  display: flex !important; flex-direction: row !important;
  align-items: stretch !important; overflow: hidden !important;
  min-height: 80px !important;
}
body.is-pwa .sortie-card .sortie-card-thumb { display: none !important; }
body.is-pwa .sortie-card .sortie-card-header {
  flex: 1 !important; padding: 12px 14px !important;
  gap: 12px !important; align-items: center !important; min-width: 0 !important;
}
body.is-pwa .sortie-card .sortie-date-badge {
  flex-shrink: 0 !important; width: 48px !important; padding: 7px 4px !important;
}
body.is-pwa .sortie-card .sortie-date-badge .jour { font-size: 22px !important; }
body.is-pwa .sortie-card .sortie-card-meta { flex: 1 !important; min-width: 0 !important; }
body.is-pwa .sortie-card .sortie-card-meta h3 {
  font-size: 14px !important; margin-bottom: 4px !important;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.is-pwa .sortie-card .sortie-card-body { display: none !important; }
body.is-pwa .sortie-card.sortie-card--past { opacity: .65 !important; }

/* ── PAGE PARCOURS ── */

/* Bouton téléchargement */
.gpx-card-download { position: absolute; bottom: 8px; left: 8px; z-index: 5; }
.jdm-btn-gpx-dl {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%; border: none;
  background: rgba(0,0,0,.45); color: rgba(255,255,255,.85);
  cursor: pointer; backdrop-filter: blur(4px); text-decoration: none;
  transition: background var(--transition);
}
body.is-pwa .jdm-btn-favori,
body.is-pwa .jdm-btn-gpx-dl {
  width: 38px !important; height: 38px !important;
}

/* Bottom sheet filtres */
.jdm-gpx-filter-toggle { display: none; }
.jdm-gpx-filter-sheet  { display: contents; }
.jdm-gpx-filter-overlay { display: none; }

body.is-pwa #form-gpx-filters {
  display: flex !important; flex-direction: row !important;
  flex-wrap: nowrap !important; align-items: center !important;
  gap: 8px !important; padding: 10px 12px !important;
}
body.is-pwa #form-gpx-filters > span:first-of-type,
body.is-pwa #form-gpx-filters > input[name="post_type"] { display: none !important; }

body.is-pwa .jdm-gpx-filter-toggle {
  display: inline-flex !important; align-items: center !important;
  gap: 7px !important; padding: 10px 16px !important;
  border-radius: var(--radius) !important;
  border: 1px solid rgba(255,255,255,.2) !important;
  background: rgba(255,255,255,.08) !important;
  color: rgba(255,255,255,.85) !important;
  font-size: 13px !important; font-weight: 600 !important;
  cursor: pointer !important; font-family: var(--font) !important;
  white-space: nowrap !important;
}
body.is-pwa .jdm-gpx-filter-toggle[aria-expanded="true"] {
  background: rgba(74,159,212,.22) !important;
  border-color: rgba(74,159,212,.55) !important; color: #7dd3fc !important;
}
body.is-pwa .jdm-gpx-filter-sheet {
  display: none !important; position: fixed !important;
  bottom: var(--bottom-nav-total) !important; left: 0 !important;
  right: 0 !important; max-height: 70vh !important; overflow-y: auto !important;
  background: rgba(8,14,22,.98) !important;
  border-top: 1px solid rgba(255,255,255,.12) !important;
  border-radius: var(--radius-lg) 20px 0 0 !important;
  padding: 20px 16px 16px !important; z-index: 1100 !important;
  flex-direction: column !important; gap: 12px !important;
}
body.is-pwa .jdm-gpx-filter-sheet.jdm-sheet-open { display: flex !important; }
body.is-pwa .jdm-gpx-filter-overlay {
  display: none !important; position: fixed !important; inset: 0 !important;
  background: rgba(0,0,0,.45) !important; z-index: 1099 !important;
}
body.is-pwa .jdm-gpx-filter-overlay.jdm-sheet-open { display: block !important; }

/* Grille 1 colonne */
body.is-pwa .gpx-grid {
  grid-template-columns: 1fr !important; gap: 12px !important;
}

/* ── Skeleton loaders ── */
@keyframes jdm-shimmer {
  from { background-position: -600px 0; }
  to   { background-position:  600px 0; }
}
body.is-pwa .jdm-skel {
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg,
    rgba(255,255,255,.04) 25%, rgba(255,255,255,.10) 50%,
    rgba(255,255,255,.04) 75%);
  background-size: 600px 100%;
  animation: jdm-shimmer 1.4s infinite linear;
}

/* ── Indicateur de navigation ── */
#jdm-nav-loader { display: none; }

/* Keyframe au niveau racine — Safari/WebKit ne supporte pas @keyframes dans @media */
@keyframes jdm-loader-pulse {
  0%,100% { box-shadow: 0 0 0 0    rgba(79,168,48,.55); }
  50%      { box-shadow: 0 0 0 14px rgba(79,168,48,0);   }
}

@keyframes jdm-loader-enter {
  from { opacity: 0; transform: scale(0.72); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes jdm-logo-pulse {
  0%   { box-shadow: 0 0 0 0    rgba(79,168,48,.70), 0 8px 32px rgba(0,0,0,.55); }
  60%  { box-shadow: 0 0 0 14px rgba(79,168,48,.0),  0 8px 32px rgba(0,0,0,.55); }
  100% { box-shadow: 0 0 0 0    rgba(79,168,48,.0),  0 8px 32px rgba(0,0,0,.55); }
}
@keyframes jdm-loader-spin {
  to { transform: rotate(360deg); }
}

@media (display-mode: standalone) {
  #jdm-nav-loader {
    animation: jdm-loader-enter .22s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  .jdm-loader-logo {
    position:   relative;
    width:      72px; height: 72px; border-radius: var(--radius-lg); overflow: hidden;
    background: rgba(22,55,30,.95); border: 2px solid rgba(111,207,66,.4);
    display:    flex; align-items: center; justify-content: center;
    animation:  jdm-logo-pulse .9s ease-out infinite,
                jdm-loader-enter .22s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  .jdm-loader-logo img { width: 54px; height: 54px; object-fit: contain; }
  .jdm-loader-logo::before {
    content:       '';
    position:      absolute;
    inset:         -5px;
    border-radius: var(--radius-lg);
    border:        2.5px solid transparent;
    border-top-color:   rgba(111,207,66,.9);
    border-right-color: rgba(111,207,66,.3);
    animation:     jdm-loader-spin .8s linear infinite;
  }
}
@media (display-mode: standalone) and (prefers-reduced-motion: reduce) {
  #jdm-nav-loader          { animation: none; }
  .jdm-loader-logo         { animation: none; }
  .jdm-loader-logo::before { animation: none; }
}