/* Mise a l'echelle commune : l'interface utilise davantage l'espace disponible
   sans agrandir brutalement les ecrans intermediaires. */
@media (min-width: 951px) {
  :root {
    --responsive-sidebar-width: clamp(235px, 13vw, 300px);
  }

  .app-shell {
    grid-template-columns: var(--responsive-sidebar-width) minmax(0, 1fr);
  }

  .sidebar {
    width: var(--responsive-sidebar-width);
    padding-inline: clamp(16px, 1.15vw, 26px);
  }

  .app-shell > main {
    max-width: none;
    margin: 0;
    padding:
      clamp(30px, 2.2vw, 54px)
      clamp(36px, 2.8vw, 72px)
      clamp(50px, 3.3vw, 78px);
  }

  .topbar h1 {
    font-size: clamp(25px, 1.55vw, 36px);
  }

  .panel-head h2,
  .intro h2 {
    font-size: clamp(16px, 1vw, 23px);
  }

  .metrics strong {
    font-size: clamp(23px, 1.45vw, 34px);
  }

  .login-card {
    width: min(440px, calc(100% - 40px));
  }
}

/* Les ecrans larges ne doivent plus conserver les tres petits libelles prevus
   pour un ordinateur portable. Les minimums restent volontairement moderes. */
@media (min-width: 1440px) {
  body {
    font-size: clamp(15px, 0.85vw, 18px);
  }

  .brand {
    font-size: clamp(20px, 1.2vw, 27px);
  }

  .logo-mark.small {
    width: clamp(36px, 2.35vw, 52px);
    height: clamp(36px, 2.35vw, 52px);
    font-size: 13px;
  }

  .nav-title {
    font-size: 12px;
  }

  .nav-button,
  .logout {
    min-height: 46px;
    padding: 12px 14px;
  }

  .app-shell :is(p, small, label, td, a, em),
  .modal :is(p, small, label, td, a, em) {
    font-size: max(12px, 0.76em) !important;
  }

  .app-shell :is(button, input, select, textarea),
  .modal :is(button, input, select, textarea) {
    font-size: max(14px, 0.88em) !important;
  }

  .app-shell th {
    font-size: max(11px, 0.68em) !important;
  }

  .metrics article > span,
  .inventory-metrics span,
  .pack-totals span,
  .badge,
  .connection-state {
    font-size: 12px !important;
  }

  .btn {
    min-height: 44px;
    padding: 11px 17px;
  }

  .metrics,
  .business-grid,
  .analysis-grid,
  .capture-layout {
    gap: clamp(15px, 1vw, 24px);
  }

  .api-grid,
  .analysis-config {
    max-width: none;
  }

  .integration-card {
    max-width: 1200px;
  }

  .modal {
    width: min(920px, calc(100% - 60px));
  }

  .small-modal {
    width: min(720px, calc(100% - 60px));
  }

  .pack-product-dialog {
    width: min(1120px, calc(100% - 60px));
  }

  .metrics article,
  .panel-head,
  .integration-card {
    padding: clamp(18px, 1.15vw, 28px);
  }

  .product-cell img,
  .product-cell video {
    width: 72px;
    height: 72px;
    flex-basis: 72px;
  }

  .platform-mini,
  .pack-marketplaces .platform-mini {
    font-size: 10px !important;
  }
}

/* Sur telephone, les controles et textes secondaires gagnent juste assez de
   taille pour etre lisibles et faciles a toucher, sans densifier la page. */
@media (max-width: 650px) {
  body {
    font-size: 15px;
  }

  .app-shell > main {
    padding: 20px 14px 34px;
  }

  .sidebar {
    padding: 11px 8px;
  }

  .nav-button {
    min-width: 64px;
    min-height: 46px;
    padding: 11px 13px;
  }

  .app-shell button > span,
  .modal button > span {
    font-size: inherit !important;
  }

  .app-shell :is(p, small, label, td, a, em),
  .modal :is(p, small, label, a, em) {
    font-size: max(10.5px, 0.72em) !important;
  }

  .app-shell :is(button, input, select, textarea),
  .modal :is(button, input, select, textarea) {
    font-size: max(12px, 0.82em) !important;
  }

  .app-shell th {
    font-size: max(10px, 0.68em) !important;
  }

  .topbar h1 {
    font-size: 27px;
  }

  .panel-head h2,
  .intro h2 {
    font-size: 18px;
  }

  .btn {
    min-height: 44px;
    padding: 11px 15px;
  }

  .metrics {
    gap: 12px;
  }

  .metrics article {
    padding: 16px;
  }

  .metrics strong {
    font-size: 25px;
  }

  .metrics article > span,
  .inventory-metrics span,
  .pack-totals span,
  .badge,
  .connection-state,
  .capture-kicker,
  .clothing-settings-kicker,
  .protocols-kicker {
    font-size: 10.5px !important;
  }

  .fields input,
  .fields select,
  .fields textarea {
    min-height: 44px;
    padding: 11px;
  }

  .platform-mini,
  .pack-marketplaces .platform-mini {
    font-size: 9px !important;
  }
}