/* Babou Coach 4.4.2 — zoom tactile et largeur mobile sécurisés */

html {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  touch-action: auto;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  width: 100%;
  max-width: 100%;
  overflow-x: visible;
  touch-action: auto;
}

main,
.page,
.page.active,
.card,
.guided-workout-shell,
.guided-session-toolbar,
.guided-adaptation,
.guided-progress,
.guided-exercise-card {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  touch-action: auto;
}

.page > *,
.guided-workout-shell > *,
.guided-session-toolbar > *,
.guided-adaptation > * {
  min-width: 0;
}

.guided-adaptation p,
.guided-prescription,
.guided-coach-tip p,
.guided-exercise-card h2 {
  overflow-wrap: anywhere;
}

/* Le pincement reste utilisable dans toutes les fenêtres défilables. */
.modal,
.modal .modal-sheet,
.modal .modal-body,
#sessionFollowupModal .modal-sheet,
#machineLibraryModal .modal-sheet,
#machineGuideModal .modal-sheet {
  touch-action: pan-x pan-y pinch-zoom !important;
}

header,
.header-inner,
.header-actions,
nav,
nav button,
nav button span {
  min-width: 0;
  box-sizing: border-box;
}

nav {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  max-width: 100%;
}

nav button {
  overflow: hidden;
}

nav button span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 620px) {
  .row,
  .grid2,
  .grid3,
  .grid4 {
    min-width: 0;
    max-width: 100%;
  }

  .row {
    flex-wrap: wrap;
  }

  .row > *,
  .grid2 > *,
  .grid3 > *,
  .grid4 > * {
    min-width: 0;
    max-width: 100%;
  }

  .row button {
    max-width: 100%;
  }

  /* L'en-tête de séance ne peut plus élargir toute la page. */
  .workout-header-card .row {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }

  .workout-header-actions {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 8px;
  }

  .workout-header-actions button {
    width: 100%;
    min-width: 0;
    padding-right: 8px;
    padding-left: 8px;
    white-space: normal;
  }

  /* Quatre éléments, quatre positions explicites : aucune colonne implicite. */
  .guided-session-toolbar {
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .guided-session-time {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  #guidedOpenGlobalTimer {
    grid-column: 1;
    grid-row: 2;
  }

  #guidedPauseSession {
    grid-column: 2;
    grid-row: 2;
  }

  .guided-screen-awake {
    grid-column: 1 / -1;
    grid-row: 3;
    width: 100%;
    white-space: normal;
    justify-content: center;
  }

  .guided-session-toolbar button {
    min-width: 0;
    width: 100%;
    white-space: normal;
  }
}

@media (max-width: 520px) {
  .header-inner {
    width: 100%;
    flex-wrap: nowrap;
  }

  .brand {
    min-width: 0;
    flex: 1 1 auto;
  }

  .brand strong,
  .brand small {
    overflow-wrap: anywhere;
  }

  .header-actions {
    flex: 0 1 auto;
    gap: 5px;
    margin-left: 8px;
  }

  .header-actions .icon-button {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
  }

  .save-indicator {
    width: 34px;
    max-width: 34px;
    flex: 0 0 34px;
    padding: 0;
    font-size: 0;
  }

  .save-indicator::before {
    content: "✓";
    font-size: 13px;
  }

  nav {
    width: 100%;
    gap: 2px;
    padding-right: 3px;
    padding-left: 3px;
  }

  nav button {
    gap: 3px;
    padding-right: 2px;
    padding-left: 2px;
  }
}

@media (max-width: 390px) {
  nav button span:last-child {
    font-size: .62rem;
  }
}