/* ======= Mobile ONLY ======= */
@media (width <= 768px){
  :root{ --md-header-h:56px; --footer-h:88px; }

  body, html {
      height: 100%;
      overflow-y: auto;
  }

  .cal-mobile{
    display:flex; flex-direction:column;
    min-height:100svh; background:#f6f7fb;
  }


  /* Sticky juste sous ta HeaderBar mobile */
  .calm-toolbar{
    /* position: sticky; */
    margin-top: var(--md-header-h);
    z-index: 5;
    background:#fff;
    border-bottom:1px solid #eee;
    padding:.75rem 1rem;
    display:grid; gap:.5rem;
  }
  .calm-select-wrap{ display:flex; align-items:center; gap:.5rem; font-weight:600; font-size:.95rem; }
  .calm-select, .calm-search{
    height:40px; border:1px solid #e5e7eb; border-radius:10px; padding:0 .75rem;
    background:#fff; font-weight:600; width:100%;
  }

  /* Contenu qui scrolle, avec espace pour ne PAS passer sous le footer */
  /* .calm-host{
    padding:.75rem 1rem;
    flex-grow: 1;
    gap: 1rem;
    overflow-y:auto;
     min-height:0;
    padding-bottom: calc(env(safe-area-inset-bottom) + var(--footer-h));
    display:flex; flex-direction:column; 
  } */

  .calm-empty{ color:#6b7280; font-style:italic; text-align:center; padding:1rem 0; }

  .nice-select {
        border: 1px solid lightgray !important;
        border-radius: 10px;
        position: relative;
        padding: 0 .75rem;
    }
  
  .nice-select select {
      border: none !important;
      background: transparent;
      width: 100%;
      height: 40px;
      font-weight: 600;
      appearance: none;
  }
  
  .nice-select .chev {
      position: absolute;
      right: 12px;
      top: 50%;
      transform: translateY(-50%);
      pointer-events: none;
  }
  
  .season-filter label {
      font-size: 1.5rem; 
      font-weight: 600;  
      margin-bottom: 0.25rem;
      display: inline-block;
  }

}