/* Couche responsive commune SMAA — chargée après les styles de chaque page. */
html {
  max-width: 100%;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

body {
  max-width: 100%;
  overflow-x: hidden;
}

img,
video,
canvas,
svg {
  max-width: 100%;
  height: auto;
}

input,
select,
textarea,
button {
  max-width: 100%;
}

pre,
code,
.message,
.event,
.small {
  overflow-wrap: anywhere;
  word-break: break-word;
}

@media (max-width: 900px) {
  main,
  .content,
  .container,
  .page,
  .wrapper {
    width: 100% !important;
    max-width: 100% !important;
  }

  .layout,
  .main-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .head,
  .page-top,
  .actions,
  .toolbar {
    flex-wrap: wrap;
  }

  table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }

  th,
  td {
    white-space: nowrap;
  }
}

@media (max-width: 760px) {
  body {
    font-size: 15px;
  }

  header,
  .header {
    width: 100%;
    min-height: 58px;
    height: auto !important;
    padding: 10px 14px !important;
    gap: 10px;
    flex-wrap: wrap;
  }

  header > *,
  .header > * {
    min-width: 0;
  }

  main,
  .content {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  h1 {
    font-size: clamp(1.35rem, 7vw, 2rem) !important;
    overflow-wrap: anywhere;
  }

  h2 {
    overflow-wrap: anywhere;
  }

  .card {
    max-width: 100%;
    padding: 16px !important;
  }

  .grid,
  .form-grid,
  .add-grid,
  .part-row {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea {
    width: 100%;
    min-width: 0;
    font-size: 16px !important;
  }

  textarea {
    min-height: 110px;
  }

  button,
  .btn,
  [class*="button"] {
    min-height: 42px;
    touch-action: manipulation;
  }

  .modal,
  .brand-modal,
  .smaa-history-modal,
  .smaa-replace-modal,
  .smaa-missing-modal-card {
    max-width: calc(100vw - 24px) !important;
    max-height: calc(100dvh - 24px) !important;
  }

  .smaa-main-navigation {
    position: sticky !important;
    top: 0;
    z-index: 1000 !important;
    width: 100%;
    padding: 7px 8px !important;
    scroll-snap-type: inline proximity;
    -webkit-overflow-scrolling: touch;
  }

  .smaa-main-navigation-group {
    flex: 0 0 auto;
  }

  .smaa-main-navigation a {
    min-height: 38px !important;
    padding: 8px 10px !important;
    scroll-snap-align: start;
  }

  .cards {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .stat-card {
    min-width: 0 !important;
  }

  .head {
    align-items: flex-start !important;
    gap: 12px;
  }

  .head .badge {
    max-width: 100%;
    white-space: normal;
  }

  .smaa-pieces-table-wrap,
  .table-wrap,
  .documents-table-wrap {
    max-width: 100%;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .smaa-atelier-garantie-group {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .smaa-document-row {
    align-items: flex-start !important;
    gap: 10px !important;
    flex-wrap: wrap;
  }

  .smaa-document-info {
    flex: 1 1 100%;
    min-width: 0;
  }

  .smaa-document-link {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .constructor-actions button,
  .actions button,
  .actions .btn {
    width: 100%;
  }
}

@media (max-width: 480px) {
  main,
  .content {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .card {
    padding: 13px !important;
    border-radius: 12px !important;
  }

  .cards {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .brand {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .fb-notification-widget {
    right: 8px !important;
    max-width: calc(100vw - 16px) !important;
  }
}

@media (orientation: landscape) and (max-height: 500px) {
  .modal,
  .brand-modal,
  .smaa-history-modal,
  .smaa-replace-modal,
  .smaa-missing-modal-card {
    overflow-y: auto !important;
  }
}