/* Grands écrans (ordinateur, tablette) : l'espace client s'affiche comme un site, et non plus dans une
   colonne de téléphone. Le téléphone garde l'affichage actuel (rien ne change sous 700 px de large). */
@media (min-width: 700px) {
  body { background: var(--surface, #fff); }
  .app-shell { max-width: 960px; box-shadow: none; background: transparent; overflow: visible; padding-bottom: 96px; }
  .bottom-nav { max-width: 960px; }
  .screen { padding: 28px 32px 40px; }
  .professional-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .categories { justify-content: flex-start; gap: 18px; flex-wrap: wrap; }
  .category { flex: 0 0 auto; min-width: 84px; }
}
/* Ordinateur : menu à gauche à la place de la barre du bas, contenu sur toute la largeur. */
@media (min-width: 1100px) {
  .app-shell { max-width: 1040px; }
  /* Pages avec menu (espace client) : le menu passe à gauche. */
  body:has(.bottom-nav) .app-shell { max-width: 1240px; padding: 0 40px 48px 268px; }
  .bottom-nav { position: fixed; top: 24px; bottom: auto; left: max(24px, calc(50% - 596px)); transform: none; width: 216px; max-width: 216px; height: auto;
    flex-direction: column; justify-content: flex-start; gap: 4px; padding: 12px; border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 8px 30px rgba(17, 17, 17, .06); }
  .nav-item { flex-direction: row; justify-content: flex-start; gap: 12px; width: 100%; min-height: 46px; padding: 0 14px; border-radius: 12px; font-size: 14px; }
  .nav-item span { font-size: 18px; width: 22px; text-align: center; }
  .nav-item.active { background: var(--lightrose, #f1f1f1); }
  .screen { padding: 32px 0 48px; }
  .professional-list { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); }
}
/* Barre de réservation fixée en bas (famille, réservation) : même largeur que la page. */
@media (min-width: 700px) { .bk-bar { max-width: 960px; } }
@media (min-width: 1100px) { .bk-bar { max-width: 1040px; } }
/* Espace Pro : barre d'enregistrement et bandeau du bas à la largeur de la page. */
@media (min-width: 700px) { .save-bar, .pro-bottom { max-width: 960px; } }
@media (min-width: 1100px) { .save-bar, .pro-bottom { max-width: 1040px; } }
/* Grilles de photos et tuiles de l'Espace Pro : plus de colonnes au lieu de tuiles géantes. */
@media (min-width: 700px) {
  .gallery-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .pf-angles { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .pro-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
}
/* « Publier une demande » (Réservations) : choix du type de professionnel en tuiles compactes. */
@media (min-width: 700px) {
  .style-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .style-model { height: 44px; font-size: 22px; }
}
/* Catégories : grille régulière, intitulés sur 2 lignes au plus ; menu plus lisible. */
@media (min-width: 700px) {
  .categories { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 16px 10px; }
  .category { min-width: 0; }
  .category > span:last-child { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-align: center; font-size: 12px; line-height: 1.3; }
}
.nav-item { font-weight: 600; color: #6f666c; }
.nav-item.active { font-weight: 700; }
/* Bas de page du site sous l'application : jamais caché par la barre de navigation du bas (téléphone). */
@media (max-width: 699px) { body:has(.bottom-nav) .yz-footer { padding-bottom: 84px; } }