/* ==========================================================================
   responsive.css — media queries (tablette & mobile)
   Mêmes points de bascule que cobalt-site : 980 / 860 / 560.
   Point de bascule menu : 860px. Le burger apparaît, la sidebar devient un
   panneau déroulant plein largeur sous une barre mobile fixe.
   ========================================================================== */

/* -------------------------------------------------- Tablette (≤ 980px) --- */
@media (max-width: 980px) {
  .page { padding: 30px 24px 60px; }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

/* -------------------------------------------------- Menu mobile (≤ 860px) - */
@media (max-width: 860px) {
  .mobile-topbar { display: flex; }

  .app-shell { display: block; }

  .sidebar {
    display: none;
    position: fixed;
    top: var(--topbar-h);
    left: 0;
    right: 0;
    width: 100%;
    height: auto;
    max-height: calc(100vh - var(--topbar-h));
    overflow-y: auto;
    flex-direction: column;
    align-items: stretch;
    padding: 10px 0 18px;
    border-right: none;
    border-bottom: 1px solid var(--border);
    background: var(--bg-secondary);
    z-index: 120;
  }
  .sidebar.is-open { display: flex; }
  .sidebar .logo { display: none; } /* déjà affiché dans la barre mobile */

  .nav-item {
    width: auto;
    height: auto;
    flex-direction: row;
    justify-content: flex-start;
    gap: 12px;
    padding: 14px 20px;
    font-size: 0.95rem;
    border-radius: 0;
    border-bottom: 1px solid var(--border);
  }
  .nav-item svg { width: 20px; height: 20px; flex-shrink: 0; }

  .main { padding-top: var(--topbar-h); min-height: 100vh; }
  .page { padding: 24px 18px 50px; }

  /* La page Coach est en hauteur pleine fenêtre : on retranche la barre mobile
     fixe pour que la barre de saisie ne soit pas repoussée hors de l'écran.
     On resserre aussi le padding latéral (30px mangeaient trop d'espace utile).
     dvh (dynamic viewport height) suit le rétrécissement de la fenêtre quand la
     barre d'adresse / le clavier apparaissent ; fallback vh pour vieux mobiles. */
  .coach-wrap {
    height: calc(100vh - var(--topbar-h));
    height: calc(100dvh - var(--topbar-h));
    padding: 16px 14px 12px;
  }
}

/* -------------------------------------------------- Mobile (≤ 560px) ----- */
@media (max-width: 560px) {
  .page-header h1 { font-size: 1.5rem; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .modal { max-width: 100%; }

  /* Les rangées flex passent à la ligne au lieu de déborder (ex : les 4 boutons
     d'action du programme, qui sortaient de l'écran à 375px). */
  .row, .row-between { flex-wrap: wrap; }

  /* Onboarding : padding latéral resserré et pastilles de jours réduites
     (7 × 48px + gaps débordaient sur les petits écrans). */
  .onb-wrap { padding: 24px 18px 120px; }
  .days-row { flex-wrap: wrap; gap: 8px; }
  .day-dot { width: 40px; height: 40px; }
  .obj-grid { grid-template-columns: 1fr; }

  /* Home : cartes d'accès rapide empilées et panneau profil plein écran.
     Fermé : right:-100% (masque un panneau pleine largeur à toutes les tailles
     mobiles, contrairement au -380px de home.css). Ouvert : la règle
     .profile-panel.open{right:0} de home.css reprend la main (spécificité
     supérieure). NB : ce rendu ouvert n'est pas visualisable dans le
     navigateur de preview (il n'applique pas les sélecteurs composés à classe
     togglée), mais est correct pour tout navigateur réel. */
  .quick-grid { grid-template-columns: 1fr; }
  .profile-panel { width: 100%; right: -100%; }

  /* Nutrition : bloc des besoins empilé, et formulaire d'ajout de repas
     (7 colonnes fixes, inutilisable en mobile) réorganisé en 2 colonnes —
     type / nom / bouton pleine largeur, les 4 champs chiffrés à deux par ligne. */
  .needs-grid { grid-template-columns: 1fr; }
  .add-meal { grid-template-columns: 1fr 1fr; }
  .add-meal select,
  .add-meal input[type="text"],
  .add-meal button { grid-column: 1 / -1; }

  /* Progression : le calendrier d'assiduité (16 colonnes-semaines) déborde sur
     mobile. On fixe la largeur des colonnes et on scrolle horizontalement à
     l'intérieur de la carte plutôt que de comprimer des cellules illisibles.
     Le JS auto-scrolle vers les semaines les plus récentes. */
  .calendar {
    grid-template-columns: repeat(16, 22px);
    overflow-x: auto;
    padding-bottom: 6px;
  }
  /* Grille des badges : 3 colonnes fixes débordaient l'écran → 2 colonnes. */
  .badges-grid { grid-template-columns: repeat(2, 1fr); }
}