/* Correctif responsive iOS isolé — ne modifie plus le comportement desktop. */
*, *::before, *::after {
  box-sizing: border-box;
}

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

img, video {
  height: auto;
}

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

textarea {
  resize: vertical;
}

/* Les corrections de débordement sont limitées aux appareils tactiles iOS.
   Elles ne s'appliquent plus à Chrome/Edge/Firefox sur ordinateur. */
@supports (-webkit-touch-callout: none) {
  html {
    width: 100%;
    max-width: 100%;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
  }

  input, select, textarea, button {
    font-size: 16px;
  }

  .mobile-app-nav,
  .bottom-nav,
  [style*="position: fixed"][style*="bottom"] {
    padding-bottom: max(env(safe-area-inset-bottom, 0px), 0px);
  }
}

@media (max-width: 767px) {
  html, body {
    max-width: 100%;
    overflow-x: hidden;
  }

  .container,
  main,
  section,
  article,
  .card,
  .panel,
  .grid,
  [class*="grid"],
  [class*="columns"],
  [class*="content"] {
    min-width: 0;
  }

  .container {
    width: 100%;
    max-width: 100%;
  }

  p, li, td, th, a, strong, span {
    overflow-wrap: anywhere;
    word-break: normal;
  }

  .actions,
  .button-group,
  .btn-group,
  [class*="actions"] {
    max-width: 100%;
    flex-wrap: wrap;
  }

  .table-responsive,
  .table-wrap,
  .table-container,
  [class*="table-responsive"],
  [class*="table-wrap"] {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* Rétablissement explicite de la carte sticky sur ordinateur.
   Le seuil est aligné sur dashboard-map-wide.css. */
@media (min-width: 1181px) {
  html,
  body,
  main,
  .main-shell,
  .main-shell > .content,
  .live-dashboard-layout,
  .ranking-map-layout {
    overflow: visible !important;
  }

  .live-dashboard-layout .map-column,
  .ranking-map-layout .map-column,
  #map-column {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 96px !important;
    align-self: start !important;
    height: max-content !important;
    z-index: 20;
  }
}