/* V2 — adaptations communes téléphone et tablette */
html {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
}
body {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow-x: clip;
}
img, video, canvas, svg, iframe {
  max-width: 100%;
}
button, input, select, textarea {
  font: inherit;
  max-width: 100%;
}
button, a, input, select, textarea {
  touch-action: manipulation;
}
button, .btn-back-home, .btn-primary, .btn-export, .btn-clear, .btn-fil {
  min-height: 42px;
}
.header-global {
  gap: 1rem;
  flex-wrap: wrap;
}
.header-container {
  min-width: 0;
}
.header-container h1 {
  overflow-wrap: anywhere;
}
main {
  min-width: 0;
  max-width: 100%;
}
.grid-wrapper, .display-zone, .drawing-area, .used-colors-wrapper {
  min-width: 0;
  max-width: 100%;
}
.grid-wrapper {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
canvas {
  max-width: none;
  touch-action: pan-x pan-y;
}
.modal-overlay {
  padding: 1rem;
}
.modal-box {
  width: min(100%, 560px);
  max-height: 90dvh;
  overflow: auto;
}
input, select, textarea {
  min-width: 0;
}
@media (max-width: 899px) {
  .header-global {
    padding: 1rem;
    align-items: center;
  }
  .header-container {
    flex: 1 1 100%;
    order: 2;
  }
  .btn-back-home {
    order: 1;
  }
  .home-container, .catalogue-layout, .reserve-layout {
    width: auto;
    margin: 1rem;
  }
  .home-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }
  .zero-layout, .image-layout {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: auto;
    margin: 1rem;
  }
  #tools-sidebar, .params-sidebar {
    width: 100%;
    max-width: none;
    min-width: 0;
    height: auto;
    max-height: none;
    overflow: visible;
  }
  .drawing-area, .display-zone {
    width: 100%;
    min-width: 0;
  }
  .tool-bar {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
  }
  .tool-column {
    min-width: min(100%, 220px);
    flex: 1 1 220px;
  }
  .controls-bar {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
  }
  .search-group, .filter-group, .export-group, .stats-group {
    min-width: 0;
    max-width: 100%;
  }
  .color-grid, .dmc-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 145px), 1fr));
  }
  .fil-block {
    max-width: 100%;
  }
}
@media (max-width: 599px) {
  body {
    font-size: 16px;
  }
  .header-global {
    padding: .8rem;
    gap: .65rem;
  }
  .header-container h1 {
    font-size: clamp(1.1rem, 5vw, 1.5rem);
    line-height: 1.25;
    letter-spacing: .02em;
  }
  .header-container p {
    font-size: .85rem;
    line-height: 1.4;
  }
  .home-container, .catalogue-layout, .reserve-layout,
  .zero-layout, .image-layout {
    margin: .65rem;
  }
  .home-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: .8rem;
  }
  .home-bloc {
    min-height: 0;
    padding: 1.1rem;
  }
  .home-bloc h2 {
    font-size: 1.15rem;
    margin-bottom: .6rem;
  }
  .icon-home {
    font-size: 2.3rem;
    margin-bottom: .5rem;
  }
  .btn-back-home {
    padding: .65rem .8rem;
    font-size: .9rem;
  }
  .input-group, .actions-grid, .param-column, .mode-selector {
    max-width: 100%;
    min-width: 0;
  }
  .actions-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .actions-grid button, .export-group button, .filter-group button {
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .zoom-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: .4rem;
  }
  .zoom-row input[type="range"] {
    grid-column: 1 / -1;
    width: 100%;
  }
  .info-bar {
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .color-grid, .dmc-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .55rem;
  }
  .search-container, .search-group, .search-input {
    width: 100%;
  }
  .controls-bar > *, .filter-group, .export-group {
    width: 100%;
  }
  .filter-group, .export-group {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .5rem;
  }
  footer {
    padding: .8rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
  }
  .modal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
  }
  .modal-actions button {
    flex: 1 1 120px;
  }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}


/* Corrections spécifiques à la page de conversion d'image */
@media (max-width: 899px) {
  .params-sidebar {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
    padding: 1rem;
    width: 100%;
  }
  .params-header {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: .65rem;
    width: 100%;
  }
  .params-sidebar h2 {
    white-space: normal;
    overflow-wrap: anywhere;
    width: 100%;
    font-size: 1.05rem;
  }
  .title-input {
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
  }
  .drop-zone {
    width: 100%;
    min-width: 0;
    min-height: 140px;
    flex-shrink: 1;
  }
  .drop-zone .img-preview {
    max-width: 100%;
    object-fit: contain;
  }
  .params-sidebar .param-column {
    width: 100%;
    min-width: 0;
    flex: 1 1 auto;
    gap: 1rem;
  }
  .params-sidebar .param-group {
    width: 100%;
    min-width: 0;
    flex: 1 1 auto;
  }
  .params-sidebar .param-group input[type="number"],
  .params-sidebar .param-group select {
    width: 100%;
    min-height: 42px;
  }
  .mode-selector {
    width: 100%;
  }
  .mode-selector label {
    min-height: 42px;
    height: auto;
    white-space: normal;
    text-align: center;
    line-height: 1.25;
    padding: .55rem .7rem;
  }
  .column-generate {
    justify-content: flex-start;
  }
  .generate-group {
    margin-top: 0;
  }
  .display-phase1, .display-phase2 {
    min-height: 220px;
    padding: 1rem;
  }
  .display-phase3 {
    min-width: 0;
  }
  .tool-bar {
    flex-direction: column;
    align-items: stretch;
  }
  .tool-column {
    width: 100%;
    min-width: 0;
    flex: 1 1 auto;
  }
  .zoom-container {
    width: 100%;
  }
  .zoom-row {
    flex-wrap: wrap;
  }
  .zoom-label {
    white-space: normal;
  }
  .zoom-row input[type="range"] {
    min-width: 0;
  }
  .mode-group-vertical {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: .5rem;
  }
  .mode-group-vertical button {
    flex: 1 1 100px;
    min-width: 0;
  }
  #filter-color {
    width: 100%;
    min-height: 42px;
  }
  #btn-export-img-png, #btn-export-img-pdf {
    width: 100%;
    margin: .2rem 0;
  }
}
@media (max-width: 599px) {
  .image-layout {
    padding: 0;
    gap: .8rem;
  }
  .params-sidebar {
    padding: .8rem;
    gap: .8rem;
  }
  .params-header {
    margin-bottom: .2rem;
  }
  .params-sidebar h2 {
    font-size: 1rem;
  }
  .drop-zone {
    min-height: 125px;
    padding: .7rem;
  }
  .param-column {
    gap: .8rem;
  }
  .info-bar {
    padding: .65rem;
    font-size: .8rem;
  }
  .grid-wrapper {
    width: 100%;
    max-width: 100%;
  }
  .fil-block {
    margin-left: .65rem;
    margin-right: .65rem;
  }
}