/* PWA mobile — les écrans étroits privilégient toujours une lecture verticale.
   Cette feuille est chargée après les styles historiques afin d'éviter qu'une
   règle desktop tardive ne recrée des colonnes trop étroites. */
@media (max-width: 600px) {
  main {
    width: calc(100% - 20px);
  }

  .candidate-folder-grid,
  .assessment-step-grid.three-step-framework,
  .workflow-steps.three-step-framework {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .candidate-folder {
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    min-width: 0;
    padding: 16px;
    overflow: hidden;
  }

  .candidate-folder > div,
  .candidate-folder .client-progress,
  .workflow-steps > div,
  .assessment-step {
    min-width: 0;
  }

  .candidate-folder h3,
  .candidate-folder small,
  .workflow-steps strong,
  .workflow-steps small,
  .assessment-step b,
  .assessment-step span {
    overflow-wrap: anywhere;
  }

  .client-progress-steps {
    flex-wrap: wrap;
  }

  .branded-expert-hero,
  .branded-studio-hero {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
    gap: 16px;
    padding: 18px;
  }

  .branded-expert-hero .studio-hero-copy h1,
  .branded-studio-hero .studio-hero-copy h1 {
    font-size: 1.65rem;
    overflow-wrap: anywhere;
  }
}